Angular 2 Unexpected directive value 'undefined'

问题

I have 2 components, I want to re-use one in the other so this is the component I want to re-use the ExpressionBuilderComponent:

@Component({
    selector: 'expression-builder',
    template: `
        <div class="container">
           <expression *ngFor="#expression of expressions" [prototypes]="prototypes" [expression]="expression" [expressions]="expressions"></expression>
           <a class="btn btn-primary" (click)="addExpression()"><i class="glyphicon glyphicon-plus"></i></a>
        </div>
    `,
    directives: [ExpressionComponent]
})

Than I have the ExpressionComponent like this :

    @Component({
    selector: 'expression',
    template: `
  <div class="row">
    <!-- First Select -->
        <div class="col-xs-3">
            <select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
                <option *ngFor="#p of prototypes" [value]="p.selector">
                    {{ p.selectorName }}
                </option>
            </select>
        </div>

 <!-- Expression Set selector -->
    <div *ngIf="prototype?.valueType === 'Set'">
       <expression-builder></expression-builder>
    </div>

Here is a PLUNKR and it should show Test twice because I use <expression-builder> twice.

In my project it is showing as an empty element, In this screenshot you can see how it is rendered out:

Can someone please help me out on this, how is it possible that in this case it is working?

http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

回答1:

If you remove ExpressionBuilderComponent from directives the error goes away:

@Component({
    selector: 'expression',
    ...
    //    directives: [ExpressionBuilderComponent]
})
export class ExpressionComponent implements OnInit {

if it is necessary I don't know a solution. AFAIK circular dependencies between classes in TypeScript can only be resolve using interfaces and I don't know how that would work with directives.

Plunker example

BTW: this is how your Plunker should have looked like. A minimial example that allows to reproduce the problem. You added way to much code that is entirely unrelated to the problem.

来源：https://stackoverflow.com/questions/36617468/angular-2-unexpected-directive-value-undefined

标签

typescript

angular

components