Angular 2意外的指令值“未定义”

本文介绍了Angular 2意外的指令值“未定义”的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有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/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?

www.syntaxsuccess/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.