1

私は、それ自体が People の配列を持つ Queue を持っています。Queue 内から、person テンプレートで定義されている各 Person を表示したいと思います。

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>

私が得るもの

例外: String のプロバイダはありません! (人 -> 文字列) in [Queue@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 に答える