web-dev-qa-db-fra.com

ngPour répéter les composants

J'ai deux composants, l'un est Post:

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

l'autre est le fil d'actualité:

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

Existe-t-il un moyen pour moi de répéter chaque publication en utilisant le modèle dans la publication plutôt qu'en utilisant simplement la syntaxe d'objet ou en formatant la publication à l'intérieur du fil d'actualité. Peut-être que j'aborde cette question dans le mauvais sens car je suis nouveau sur ang2. Toute aide est appréciée.

Merci beaucoup.

angularcomponents
12
Sammy Roberts

En fait, Angular2 instanciera le composant pour vous. Ajoutez simplement la balise selector dans votre boucle ngFor:

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

Vos données de publication doivent être définies de cette façon:

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

Pour cela, vous devez refactoriser un peu votre composant pour ajouter des entrées:

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