在 angular 4 table 中迭代 JSON

Question

我有一个 ASP.net 网站 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"}]}]

我在angular4中写了视图，我的服务实现是

 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>

查看以下 link 以获得演示

DEMO

在 angular 4 table 中迭代 JSON

Iterate JSON in a angular 4 table

angular2-template

angular