在角度4表中迭代JSON

Question

我有一个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时做错了什么。能否请你帮忙。

Answer 1

请尝试以下代码段

<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