在角度4表中迭代JSON

时间:2017-12-31 07:35:00

标签: angular angular2-template

我有一个ASP.net Web API返回这些数据。

json数据:

[{"Id":"5a449c148b021b5fb4cb1f66","airline":[{"airlineID":-1,"airlineName":"Unknown","airlineAlias":"","airlineIATACode":"-","airlineICAOCode":"N/A","airlineCallsign":"","airlineBaseCountry":"","airlineActiveIndicator":"Y"},{"airlineID":1,"airlineName":"Private flight","airlineAlias":"","airlineIATACode":"-","airlineICAOCode":"N/A","airlineCallsign":"","airlineBaseCountry":"","airlineActiveIndicator":"Y"},{"airlineID":2,"airlineName":"135 Airways","airlineAlias":"","airlineIATACode":"","airlineICAOCode":"GNL","airlineCallsign":"GENERAL","airlineBaseCountry":"United States","airlineActiveIndicator":"N"}]}]

我已经在角度4中编写了视图。我的服务实现是

 getairlinedetailsservice(){
    return this.http.get(this.apiurl)
    .map((res:Response)=>res.json())
  }

我的控制器实施

this.srService.getairlinedetailsservice().subscribe(srs => {
        console.log(srs);
        this.srs=srs;

在我的HTML视图中,我有这段代码

<tr *ngFor="let sr of srs">
      <td>{{sr.airlineName}}</td>
      <td>{{sr.airlineIATACode}} </td>
      <td>{{sr.airlineICAOCode}} </td>
      <td>{{sr.airlineCallsign}} </td>
      <td>{{sr.airlineBaseCountry}} </td>      
 </tr>

我知道在绑定html时我做错了什么。 能帮忙吗?

1 个答案:

答案 0 :(得分:2)

尝试以下代码段

<tr *ngFor="let sr of srs[0].airline">
      <td>{{sr.airlineName}}</td>
      <td>{{sr.airlineIATACode}} </td>
      <td>{{sr.airlineICAOCode}} </td>
      <td>{{sr.airlineCallsign}} </td>
      <td>{{sr.airlineBaseCountry}} </td>      
 </tr>

查看以下演示链接

<强> DEMO