Angular2 NgFor在组件内

Question

我有一个类似树的结构，并尝试从angular2中的组件和子组件创建一个列表。

import SpriteKit

class GameScene: SKScene, SKPhysicsContactDelegate {

var movingGround: AKMovingGround!
var hero: AKHero!
var cloudGenerator: AKCloudGenerator!
var obstacleGenerator: AKObstacleGenerator!
var coinGenerator: AKCoinGenerator!
var coinGS: AKCoin!
var isStarted = false
var isGameOver = false

var currentLevel = 0

override func didMoveToView(view: SKView) {
    backgroundColor = UIColor(red: 159.0/255.0, green: 201.0/255.0 , blue: 244.0/255.0 , alpha: 1.0)
  }


override func update(currentTime: CFTimeInterval) {
    /* Called before each frame is rendered */
if coinGenerator.coinTracker.count > 0{

        let coin = coinGenerator.coinTracker[0] as AKCoin
        let coinLocation = coinGenerator.convertPoint(coin.position, toNode: self)

        if  coinLocation.x < hero.position.x {

            coinGS.coin.color = UIColor.clearColor()

            coinGenerator.coinTracker.removeAtIndex(0)
            let CoinsLabel = childNodeWithName("CoinsLabel") as! AKCoinsLabel
                CoinsLabel.increment()
                }  
         }
      }

我正在尝试遍历该结构并使用不同的组件构建一个html列表，具体取决于循环迭代的深度。

TypeScript

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() {
    }
}

问题

我遇到了错误

  

无法绑定到'ngForFor'，因为它不是'template'元素的已知属性，并且没有匹配的指令和相应的属性

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

使用* ng-for时是否有任何限制？还是我没看到的一些陷阱？

THX

Answer 1

您必须在<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select name="Agency" id="AgencyDetails"> <option value="0">Select Agency..</option> <option value="Name 1" data-id="Name1">Name1</option> <option value="Name 2" data-id="Name2">Name2</option> <option value="Name 3" data-id="Name3">Name3</option> <option value="Others" data-id="AddDiv">Others</option> </select> <div id="AddDiv" class='details'> <li class="bigfield"> <input placeholder="AddDiv" type="text" name="agentName" /> </li> </div> <div id="Name1" class='details'> <li class="bigfield"> <input placeholder="Name1" type="text" name="agentName" disabled="disabled" /> </li> </div> <div id="Name2" class='details'> <li class="bigfield"> <input placeholder="Name2" type="text" name="agentName" disabled="disabled" /> </li> </div> <div id="Name3" class='details'> <li class="bigfield"> <input placeholder="Name3" type="text" name="agentName" disabled="disabled" /> </li> </div>指令中使用-Jjmeter.save.saveservice.output_format=xml \ -Jjmeter.save.saveservice.response_data.on_error=true \ 代替of：

for

* ng-for已更改为* ngFor

*＃item已更改为let item