ngFor powtarzające Komponenty

Question

Mam dwa elementy jeden jest postu:

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; 
    } 
} 

drugi jest 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); 
    } 
} 

Czy istnieje sposób dla mnie powtarzać każdego postu przy użyciu szablonu w poście zamiast po prostu używając składni obiektu lub formatowania postu wewnątrz kanału informacyjnego. Być może podchodzę do tego w niewłaściwy sposób, ponieważ jestem nowy w ang2. Każda pomoc jest doceniana.

Dziękuję bardzo.

Answer 1

W rzeczywistości Angular2 utworzy komponent dla Ciebie. Wystarczy dodać znacznik wyboru w ngFor pętli:

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

Twoje dane pocztowe muszą być zdefiniowane w następujący sposób:

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

Do tego trzeba byłaby nieco swój składnik dodawania wejścia:

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