Angular 2意外的指令值“未定义” [英] Angular 2 Unexpected directive value 'undefined'

问题描述

我有2个组件，我想在另一个组件中重用，所以这是我要重用ExpressionBuilderComponent的组件：

  @Component（{
选择器：'expression-builder'，
模板：`
< div class = container> 
< * ngFor =＃表达式的表达式 [prototypes] =原型 [expression] = expression [expressions] = expressions>< / expression> 
< a class = btn btn- primary（click）= addExpression（）< i class = glyphicon glyphicon-plus< / i>< / a> 
< / div> 
` ，
指令：[ExpressionComponent] 
}）
  

比我拥有ExpressionComponent像这样：

  @Component（{
选择器：'expression'，
模板：`
< div class = row> 
< ;!-首先选择-> 
< div class = col-xs-3> 
< ; select class = form-control [（ngModel）] = selectedPrototypeSelector（ngModelChange）= onPrototypeChange（）> 
< option * ngFor =原型的#p [value] = p.selector> 
 {{p.selectorName}} 
< / option> 
< / select> 
< / div> 
 
<！-表达式集选择器-> 
< div * ngIf = prototype？.valueType ==='设置'> 
< expression-builder>< / expression-builder> 
< / div> 
  

这里是

有人可以帮我这个忙吗，在这种情况下它怎么可能工作呢？

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

解决方案

如果您可以从指令中删除 ExpressionBuilderComponent ，错误就会消失：

  @Component（ {
选择器：'expression'，
 ... 
 //指令：[ExpressionBuilderComponent] 
}）
导出类ExpressionComponent实现OnInit {
  

如果有必要，我不知道解决方案。 TypeScript中类之间的AFAIK循环依赖关系只能使用接口来解决，我不知道如何使用指令。

柱塞示例

顺便说一句：这就是您的Plunker的外观。一个可以重现该问题的最小示例。您为与该问题完全无关的许多代码添加了方法。

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

解决方案

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.

这篇关于Angular 2意外的指令值“未定义”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！