Angular 2：* ngFor指令列表

Question

我有一个Queue，它本身有一个People数组。从队列中，我想按照人员模板中的定义显示每个人员。

queue.ts

import {Component} from 'angular2/core'; 
import {Person} from '../person/person'; 
@Component({ 
    selector: 'queue', 
    directives: [Person], 
    template: `<div class="queue"> 
     <person *ngFor="#tP of people"></person> 
    </div>` 
}) 
export class Queue { 
    people = []; 
    constructor(){ 
     this.addPerson(new Person("Bob",20)); 
     this.addPerson(new Person("Jane",30)); 
     this.addPerson(new Person("Dog",40)); 
     this.addPerson(new Person("Cat",50)); 

    }; 
    addPerson(tP:Person):void 
    { 
     this.people.push(tP); 
    } 
} 

person.ts

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'person', 
    template: `<div class="person"> 
     <div class="name">{{name}}</div> 
     <div class="age">{{age}}</div> 
    </div>` 
}) 
export class Person { 
    constructor(public name:string = "", public age:number = 5){}; 
    setName(newName:string):void{ 
     this.name = newName; 
    } 
} 

我希望什么

<div class="queue"> 
<div class="person"><div class="name">Bob</div><div class="age">20</div></div> 
<div class="person"><div class="name">Jane</div><div class="age">30</div></div> 
<div class="person"><div class="name">Dog</div><div class="age">40</div></div> 
<div class="person"><div class="name">Cat</div><div class="age">50</div></div> 
</div> 

我得到了什么

例外：没有字符串的提供者！ （人 - >字符串）在[人队列@ 1：16]

摘要

我想再现由所述指令本身所限定使用所述模板的指令的列表。

Answer 1

<person *ngFor="let tP of people"></person> 

已经为people中的每个项目创建了一个新的人。相反，您应该将数据添加到people = [];，然后使用绑定将数据传递到组件。

constructor(){ 
    this.addPerson({name: "Bob", age: 20}); 
    this.addPerson({name: "Jane", age: 30}); 
    this.addPerson({name: "Dog", age: 40}); 
    this.addPerson({name: "Cat", age: 50}); 

}; 

<person *ngFor="let tP of people" [name]="tp.name" [age]="tp.age"></person> 

export class Person { 
    @Input() name:string; 
    @Input() age:number; 

    ngOnInit() { 
    console.log('name: ' + this.name + ', age: ' + this.age); 
    } 
} 

你通常不创建组件自己的情况下，您指示角度来为你做它。

如果组件具有构造函数参数，Angular会在提供者列表中查找它们并创建实例本身以将它们传递给构造函数。由于Angular没有string的提供商，因此您的错误消息是由此产生的。 （constructor(public name:string = "",）