loops - Display data from a json object array -

i unable loop through json object array , display data in separate divs. using mock data.

team.servie.ts:

import { http } '@angular/http'; import { observable } 'rxjs/rx'; import { injectable } '@angular/core'; import { team } './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 } '@angular/core'; import { teamservice } '../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 = 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> 

i know missing something, can't figure out what.

any tips appreciated.

use *ngfor structureal directive like:

<div *ngfor="let displaydata of data">      <p> {{ displaydata.id }}</p>  </div>