使用angular2将json数据加载到表中

Question

i want to load the json file into the table described. I tried it but it will not work . All the pages are attached with this question. table does not shows in my localhost..what will i do ...thanks in advance.

app.component.html

 <h1> hellooooooo {{title}} </h1> <div *ngFor="let d of data | async"> <table border="1"> <tr> <th>ID:</th><th>name:</th><th>email:</th><th>age:</th></tr> <tr><td>{{d.id}}</td><td>{{d.name}}</td><td>{{d.email}}</td><td>{{d.age}}</td></tr> </tr> </table> </div> 

app.component.ts

 import { Component } from '@angular/core'; import { Observable } from 'rxjs'; import { JsonService } from 'app/json.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [JsonService] }) export class AppComponent { title = 'app works!'; data: Observable<Array<any>>; constructor(private service: JsonService){ this.data = service.getpeople(); console.log("AppComponent.data:" +this.data); } } 

json.services.ts

 import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs'; @Injectable() export class JsonService { getpeople: any; constructor(private http: Http) { } getPeople(): Observable<any>{ return this.http.get('./data/people.json') .map((res:Response) => res.json()) .catch((error:any) => Observable.throw(error.json().error || 'server error')); } } 

people.json

 [ { "id": "1", "name": "abc", "email": "a@b.com", "age": "25" }, { "id": "2", "name": "efg", "email": "a@b.com", "age": "22" }, { "id": "3", "name": "hij", "email": "a@b.com", "age": "29" } ] 

Please tell me how to perform..thanks in advance..

Answer 1

Angular suggests that Observable properties end with "$" so your component would have:

data$: Observable<Array<any>>;

And in your template:

<div *ngIf="data$ | async; let d">
    <table border="1">
        <tr>
          <th>ID:</th>
          <th>name:</th>
          <th>email:</th>
          <th>age:</th>
        </tr>
        <tr>
            <td>{{d.id}}</td>
            <td>{{d.name}}</td>
            <td>{{d.email}}</td>
            <td>{{d.age}}</td>
        </tr>  
     </table> 
</div>