Angular 2のJSONオブジェクトで* ngForを使用する

Question

デカップリングされたwordpressソリューションを実装しようとしていますが、私のテンプレートでJSONオブジェクトのプロパティを表示するのに少し混乱しています。 WP APIのJSONオブジェクトを返すことはできますが、その処理方法はわかりません。テンプレートに値を表示するプロパティを取得できる唯一の方法は、ngForループでは機能しない補間プロパティに[0]を追加する場合です。

{ 
    "data": [ 
    { "id": "1", "name": "Windstorm" }, 
    { "id": "2", "name": "Bombasto" }, 
    { "id": "3", "name": "Magneta" }, 
    { "id": "4", "name": "Tornado" } 
    ] 
} 

次のようになります。私はここaccess key and value of object using *ngForが が、これはGoogleが

Googleがこのデータセットを使用していますhttp://plnkr.co/edit/WkY2YE54ShYZfzJLSkMX?p=preview英雄アプリのツアーをどのように処理するかではないようです@Thierryにより溶液を読みましたJSONの私にはオブジェクトなので、どのアプリがこのような何かを処理することができます：

<ul> 
    <li *ngFor="let hero of heroes"> 
    {{hero.name}} 
    </li> 
</ul> 

オブジェクトの上に反復処理を可能にするRC5の変化があったかどう私は不明確だ、または私はまだ変換する必要がありますこれはどういうわけか。私はAngularにとってはとても新しいので、このことについて少しガイダンスを使うことができます。ありがとう!!

コメントに基づいて更新すると、http://localhost:8888/wp-json/wp/v2/postsのようなAPIリクエストを変換したい場合は、そのための最善の方法は何ですか？そこにあなたが求めているものへの短い答えはありませんが、ここにいくつかのヒントがあり、あなたのためのすべてのコードを記述せず

[ 
    { 
    "id": 4, 
    "date": "2016-08-09T00:09:55", 
    "date_gmt": "2016-08-09T00:09:55", 
    "guid": { 
     "rendered": “http://localhost:8888/?p=4" 
    }, 
    "modified": "2016-08-09T00:11:05", 
    "modified_gmt": "2016-08-09T00:11:05", 
    "slug": “wp-api-test”, 
    "type": "post", 
    "link": "http://localhost:8888/2016/08/wp-api-test”, 
    "title": { 
     "rendered": "testing the wp api" 
    }, 
    "content": { 
     "rendered": "<p>loreum ipsum</p>\n" 
    }, 
    "excerpt": { 
     "rendered": "<p>loreum ipsum</p>\n" 
    }, 
    "author": 1, 
    "featured_media": 0, 
    "comment_status": "open", 
    "ping_status": "open", 
    "sticky": false, 
    "format": "standard", 
    "categories": [ 
     1 
    ], 
    } 
] 

Answer 1

：あなたが持っている

• マイリターンコードは次のようになります戻ってくるJSONレスポンスを受け取り、TypeScriptでインターフェースまたはクラスを作成します。POSTを実行すると、Angular 2はJSONを受け取り、クラスを使用してオブジェクトに変換できます。 - あなたのJSONは、活字体で型付けしてください - http://blog.ninja-squad.com/2016/03/15/ninja-tips-2-type-your-json-with-typescript/

• 活字体JSONマッパー - http://cloudmark.github.io/Json-Mapping/

Answer 2

どのようにあなたを定義しているhttp://json2ts.com/

忍者のヒント2：TS発生器へ

JSONは、サービス？

export interface IPost { 
    id: number; 
    date: Date; 
    date_gmt: Date; 
    ... // rest of your defintion 
} 

@Injectable() 
export class BlogPostService { 
    private http: Http; 

    constructor(http: Http) { 
     this.http = http; 
    } 

    private apiUrl: string = 'api/blog/posts.json'; 

    getPosts(): Observable<IPost[]> { 
     return (this.http.get(this.apiUrl) 
      .map((response: Response) => <IPost[]>response.json()) 
      .do(data => console.log('All: ' + JSON.stringify(data))) 
      .catch(this.handleError)) as any; 
    } 

    private handleError(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json().error || "Server error"); 
    } 
} 

この行は[]に役立ちますIPosts

.map((response: Response) => <IPost[]>response.json()) 

希望の配列にあなたのJSONオブジェクトを変換する必要があります。

は、ここでの例です。

Answer 3

お返事ありがとうございます。彼らは私を解決に導くのを助けました。ポスト配列を作成し、Observableリターンと同じにすることで、これを単純に解決できました。コンポーネントは次のようになります。

<li *ngFor="let post of posts"> 
    <h3>{{post.title.rendered}}</h3> 
</li>