[英]Angular2 NgFor Within Components
I have a tree like structure and try to create a list from components and subcomponents in angular2. 我有一个像树的结构,并尝试从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"},
]}
]}
]
I am trying to loop throught that structure and build an html list using different components depending on the depth of the loop iteration. 我正在尝试遍历该结构,并根据循环迭代的深度使用不同的组件来构建html列表。
TypeScript 打字稿
// 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 的HTML
<head>
<body>
<root></root>
</body>
</head>
Problem 问题
I run into an error 我遇到一个错误
Can't bind to 'ngForFor' since it isn't a know property of the 'template' element and there are no matching directives with a corresponding property 无法绑定到“ ngForFor”,因为它不是“ template”元素的已知属性,并且没有与相应属性匹配的指令
The Error refers to the *ng-for in the ChildTwo Component. 错误是指ChildTwo组件中的* ng-for。 When I remove the html tag everything works just fine. 当我删除html标记时,一切正常。
Are there any limits when using *ng-for? 使用* ng-for有什么限制? Or some Pitfalls I did not see? 还是我没有看到的一些陷阱?
thx 谢谢
You must use of
instead of for
in the ng-for
directive: 您必须使用of
,而不是for
在ng-for
指令:
<childTwo *ngFor="let childOneData of data.children" [data]="childOneData "></childTwo>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.