組件內的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列表。

打字稿

// 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有什么限制？ 還是我沒有看到的一些陷阱？

謝謝

Answer 1

您必須使用of ，而不是for在ng-for指令：

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

組件內的Angular2 NgFor

問題描述

1 個解決方案

解決方案1
11 已采納 2015-09-03 10:01:34

* ng-for更改為* ngFor

*＃項已更改為允許項

組件內的Angular2 NgFor

問題描述

1 個解決方案

解決方案1 11 已采納 2015-09-03 10:01:34

* ng-for更改為* ngFor

*＃項已更改為允許項

解決方案1
11 已采納 2015-09-03 10:01:34