我有一个像树的结构，并尝试从angular2中的组件和子组件创建一个列表。
var data = [
{id:"1",
children: [
{id:"2",
children: [
{id: "3"},
{id: "3"},
{id: "3"},
{id: "3"},
]},
{id:"2",
children: [
{id: "3"},
{id: "3"},
{id: "3"},
{id: "3"},
]}
]}
]
我正在尝试遍历该结构，并根据循环迭代的深度使用不同的组件来构建html列表。
打字稿
// ROOT
@Component({
selector: 'root',
})
@View({
templateUrl: '
<childOne *ng-for="#data for list.children" [data]="data"></childOne>
',
directives: [ChildOne, NgFor]
})
class Root{
list:Array<Object>;
constructor() {
this.list = // request to backend
}
}
// COMPONENT 1
@Component({
selector: 'childOne',
properties: ['data']
})
@View({
templateUrl: '
{{data.id}}
<childTwo *ng-for="#childOneData for data.children" [data]="childOneData "></childTwo>
',
directives: [ChildTwo, NgFor]
})
class ChildOne{
}
// COMPONENT 2
@Component({
selector: 'childTwo',
properties: ['data']
})
@View({
templateUrl: '
{{data.id}}
<childThree *ng-for="#childTwoData for data.children" [data]="childTwoData"></childTwo>
',
directives: [ChildThree, NgFor]
})
class ChildOne{
constructor() {
}
}
// COMPONENT 3
@Component({
selector: 'childThree',
properties: ['data']
})
@View({
templateUrl: '{{data.id}}',
})
class ChildThree{
constructor() {
}
}
的HTML
<head>
<body>
<root></root>
</body>
</head>
问题
我遇到一个错误
无法绑定到“ ngForFor”，因为它不是“ template”元素的已知属性，并且没有与相应属性匹配的指令
错误是指ChildTwo组件中的* ng-for。当我删除html标记时，一切正常。
使用* ng-for有什么限制？还是我没有看到的一些陷阱？
谢谢
您必须在指令中使用of而不是：forng-for
<childTwo *ngFor="let childOneData of data.children" [data]="childOneData "></childTwo>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句