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>