Angular 2 - iteracja na tablicy json wewnątrz obiektu json

Question

Uczę się języka Angular 2 i pracuję z tablicami statycznymi, a teraz próbuję dowiedzieć się więcej o czytaniu danych zdalnych.

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

} 

ten sposób mój API url pokazują wyniki: obiekt

1. JSON nazwie "Docs".
2. Tablica json elementów o id i innych ciągach.

Moim celem jest, aby każdy element pętli tablicy i pokazują dane wewnątrz niego (id, placeID, etc ..)

To moja aplikacja, która sprawia, że ​​nie iteracji na wszystkich:

Jak mogę wykonać pętlę z *ngFor każdym z elementów tablicy json?

Answer 1

Plunker

Do pętli na tablicy:

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

---

Do pętli nad właściwości obiektu:

Trzeba będzie generować Array OB Właściwości jekt

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

i używać go jak

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

Albo można użyć jako Pipe.