[英]Angular2 NgFor Within Components
我有一个像树的结构,并尝试从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
,而不是for
在ng-for
指令:
<childTwo *ngFor="let childOneData of data.children" [data]="childOneData "></childTwo>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.