web-dev-qa-db-ja.com

ngFor繰り返しコンポーネント

私は2つのコンポーネントを持っています。1つは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;
    }
}

もう1つはニュースフィードです。

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

オブジェクト構文を使用したり、ニュースフィード内で投稿をフォーマットしたりするのではなく、投稿内のテンプレートを使用して各投稿を繰り返す方法はありますか？おそらく私はang2を始めたばかりなので、間違った方法でこれに取り組んでいます。どんな助けでもありがたいです。

どうもありがとうございました。

angularcomponents
12
Sammy Roberts

実際、Angular2はコンポーネントをインスタンス化します。 ngForループにセレクタータグを追加するだけです：

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

投稿データは次のように定義する必要があります。

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

そのためには、コンポーネントを少しリファクタリングして入力を追加する必要があります。

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