Angular 2：* ngFor指令列表

我有一個Queue，它本身有一個People數組。從隊列中，我想按照人員模板中的定義顯示每個人員。Angular 2：* ngFor指令列表

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]

摘要

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

來源

2016-02-18 CT14.IT

<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 = "",）

來源

2016-02-18 16:04:01

嘿謝謝您的詳細回覆。所以在這個解決方案中，父隊列有一個對象數組而不是Person，然後必須明確地將所有必需的屬性傳遞給它通過* ngFor創建的。如果這是唯一的方法，那麼很好（我不想減損你的幫助），但對我來說，這似乎是很多重複，它依賴於父母意識到孩子需要呈現什麼。理想情況下，我希望父母對孩子說「愛，給自己！」而孩子則完成剩下的所有細節。 –

關於字符串提供程序的問題，按照我的理解，我應該能夠在構造函數中傳遞字符串，如此處所示 - https://egghead.io/lessons/angular-2-adding-a-data-model - 在1分鐘標記 –

這是一個不由Angular管理的模型類。該類用作數據的簡單容器，而不是作爲組件，甚至不作爲服務，只能由您編寫的代碼實例化。 –

Angular 2：* ngFor指令列表

回答

相關問題