Angular 2：*ngFor 指令列表

Question

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

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>

我得到了什么

例外：没有字符串的提供者！ (Person -> String) in [队列中的人员@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 会在提供者列表中查找它们并自己创建实例以将它们传递给构造函数。您的错误消息由此产生，因为 Angular 没有string 的提供程序。 (constructor(public name:string = "",)