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

【问题标题】：load json data into table with angular2使用angular2将json数据加载到表中
【发布时间】：2017-09-21 10:56:09
【问题描述】：

我想将 json 文件加载到所描述的表中。我试过了，但它不起作用。所有页面都附有这个问题。表没有显示在我的本地主机中..我该怎么办...提前谢谢。

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"
    }
]

请告诉我如何执行..提前谢谢..

【问题讨论】：

标签： javascript html json angular

【解决方案1】：

Angular 建议 Observable 属性以“$”结尾所以你的组件会有：

data$: Observable<Array<any>>;

在你的模板中：

<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>

【讨论】：