Angular2 NgFor 在组件内

Question

我有一个树状结构，并尝试从 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 列表。

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

<head>
  <body>
    <root></root>
  </body>
</head>

问题

我运行进入错误

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

错误指的是ChildTwo组件中的*ng-for。当我删除 html 标签时，一切正常。

使用*ng-for 有什么限制吗？或者我没有看到的一些陷阱？

感谢

Answer 1

您必须在 ng-for 指令中使用 of 而不是 for：

<childTwo *ngFor="let childOneData of data.children" [data]="childOneData "></childTwo>

Angular2 NgFor 在组件内

Angular2 NgFor Within Components

typescript

angular

ng-for 更改为 ngFor

*#item 改为让 item

Angular2 NgFor 在组件内

Angular2 NgFor Within Components

typescript

angular

*ng-for 更改为 *ngFor

*#item 改为让 item

ng-for 更改为 ngFor