1

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

队列.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);
    }
}

个人.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] 中的（人员 -> 字符串）

概括

我想使用指令本身定义的模板呈现指令列表。

4

1 回答 1

2 
<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 = "",)

于 2016-02-18T16:04:01.567 回答