ngFor sich wiederholende Komponenten

Question

Ich habe zwei Komponenten ist Beitrag:

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'post', 
    template: ` 
    <h1>{{title}}</h1> 
    <p>{{postText}}</p> 
    ` 
}) 
export class Post { 
    title : string; 
    postText : string; 
    constructor(title:string, postText:string) { 
     this.title = title; 
     this.postText = postText; 
    } 
} 

der andere Newsfeed:

import {Component} from '@angular/core'; 
import {Post} from "./app.post.component"; 

@Component({ 
    selector: 'news-feed', 
    template: ` 
    <h1>News Feed</h1> 
    <ul *ngFor='#post of posts'> 
     <li *ngFor='#post of posts'> 
      {{post | json}} 
     </li> 
    </ul> 
    ` 
}) 
export class NewsFeed { 
    posts : Post[]; 
    constructor() { 
     let p1 = new Post("Post1","Wow greate post"); 
     let p2 = new Post("Such Post", "WoW"); 
     this.posts =[]; 
     this.posts.push(p1); 
     this.posts.push(p2); 
    } 
} 

Gibt es eine Möglichkeit für mich, alle Beiträge wiederholen Sie die Vorlage in der Post mit, anstatt Verwenden Sie einfach die Objektsyntax oder formatieren Sie den Post innerhalb des Newsfeeds. Vielleicht nähere ich mich dem in die falsche Richtung, da ich neu bei ang2 bin. Jede Hilfe wird geschätzt.

Vielen Dank.

Answer 1

In der Tat wird Angular2 Komponente für Sie instanziieren. Fügen Sie einfach die Wahl Tag in Ihrer ngFor Schleife:

<ul> 
    <li *ngFor="#postData of posts"> 
    <post [title]="postData.title" 
      [postTest]="postData.postText"></post> 
    </li> 
</ul> 

Ihre Post Daten müssen auf diese Weise definiert werden:

diese

posts : any[]; 
constructor() { 
    this.posts =[]; 
    this.posts.push({title:"Post1",postText:"Wow greate post"}); 
    this.posts.push({title:"Such Post", postText:"WoW"}); 
} 

Für Sie ein wenig Ihre Komponente Refactoring benötigen Eingänge hinzuzufügen:

@Component({ 
    selector: 'post', 
    template: ` 
    <h1>{{title}}</h1> 
    <p>{{postText}}</p> 
    ` 
}) 
export class Post { 
    @Input() // <----- 
    title : string; 
    @Input() // <----- 
    postText : string; 
}