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

我已经用 Angular 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

试试下面的代码sn-p

<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