顯示來自json對象數組的數據

Question

我無法循環瀏覽json對象數組，並在單獨的div中顯示所有數據。 目前只使用一些模擬數據。

Team.servie.ts：

import { Http } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import { Injectable } from '@angular/core'; 
import { Team } from './team'; 

@Injectable() 
export class TeamService { 
    private _url = "http://jsonplaceholder.typicode.com/posts" 
    constructor(private _http: Http){ 

    } 

    getPost() : Observable<Team[]>{ 
     return this._http.get(this._url) 
     .map(res => res.json()); 
    } 

    createPost(post: Team){ 
     return this._http.post(this._url, JSON.stringify(post)) 
     .map(res => res.json()); 
    } 
} 

Component.ts：

import { Component, OnInit } from '@angular/core'; 
import { TeamService } from '../team.service'; 


@Component({ 
    selector: 'About', 
templateUrl: './about.component.html', 
providers: [TeamService] 
    }) 
export class AboutComponent implements OnInit{ 

    data; 


    isLoading = true; 

     constructor(private _teamService: TeamService){ 
     /*this._teamService.createPost({userId: 1, title: "a", body: "b"});*/ 
     } 

      ngOnInit(){ 

       var text = ""; 
        var i = 0; 

        this._teamService.getPost() 
       .subscribe(post => { 

        this.isLoading = false; 
        this.data = post; 
        console.log(post[0]); 
       }); 
      } 
} 

Team.ts

export interface Team{ 
    userId: number; 
    id?: number; 
    title: string; 
    body: string; 
} 

component.html：

<div *ngIf="isLoading">Getting data....</div> 


<div let displayData of data> 

    <p> {{ displayData.id }}</p> 

</div> 

我知道我錯過了什麼，但我無法弄清楚什麼。

任何提示將不勝感激。

Answer 1

使用* ngFor structureal指令，如：

<div *ngFor="let displayData of data"> 

    <p> {{ displayData.id }}</p> 

</div>