web-dev-qa-db-ja.com

Angular 2-jsonオブジェクト内のjson配列を反復処理する

私はAngular 2を学んでいて、静的配列を扱ってきました。そして今、リモートデータの読み取りについてもっと学ぼうとしています。

私のapp.component.ts：

import {Component} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'my-app',
  template:`
  <h1>Angular2 HTTP Demo App</h1>
  <h2>Foods</h2>
  <ul>
    <li *ngFor="#doc of docs">{{doc.id}}</li>
  </ul>
  `
})
export class AppComponent {

  public foods;
  public books;
  public movies;

  constructor(private http: Http) { }

  ngOnInit() {
    this.getFoods();
  }

  getFoods() {
    this.http.get('http://my API URL')
      .map((res:Response) => res.json())
      .subscribe(
        data => { this.foods = data},
        err => console.error(err),
        () => console.log('done')
      );
  }

}

これは私のAPI URLが結果を表示する方法です：

API URL RESuLT

  1. 「docs」という名前のjsonオブジェクト。
  2. iDと他の文字列を持つアイテムのjson配列。

私の目標は、各配列項目をループし、その中のデータ（id、placeIDなど）を表示することです

これは私のアプリであり、まったく繰り返しを行いません：

No iteration

*ngForの各json配列項目でループするにはどうすればよいですか？

jsonangular
15
TheUnreal

Plunker

配列をループするには：

<li *ngFor="let doc of docs">{{doc.id}}</li>

オブジェクトのプロパティをループするには：

オブジェクトプロパティのArrayを生成する必要があります

generateArray(obj){
   return Object.keys(obj).map((key)=>{ return obj[key]});
}

そしてそれを次のように使用します

<li *ngFor="let doc of docs">
   <span *ngFor="let v of generateArray(doc)"> {{v}} </span>
</li>

または、 Pipe。 として使用できます

11
Ankit Singh