Question

我有这样的json响应。

{
  "response": {
    "data": {
      "customers": [{
        "customerNumber": "123",
        "customerName": "ABC",
        "customeraddresse": [{
          "address": "test"
        }]
      }, {
        "customerNumber": "345",
        "customerName": "CDS",
        "customeraddresse": [{
          "address": "test1"
        }]
      }]
    }
  }
}

我正在做这样的请求来获取响应数据。它将被退回，因为我已经检查过了。

public getData(): Promise<any> {
  let payload = JSON.stringify( ... );
  let headers = new Headers({ 'Content-Type': 'application/json'});

  return this.http.post(this.url, payload, { headers: headers })
             .toPromise()
             .then(res => {                  
                this.response_data = res.json().response.data;                  
                return this.response_data;
             })
             .catch(this.handleError);
}

但问题是，我想获取customerNumber和customerName的值，并将它们显示在列表中

在此示例中，有两个客户，因此此标记应呈现两次：

<div>
  <div>CustomerNumber</div>
  <div>CustomerName</div>
</div>

Answer 1

您应该使用*ngFor循环。

在你的模板中：

<div *ngFor="let customer of response_data.customers">
      <div>{{customer.customerNumber}}</div>
      <div>{{customer.customerName}}</div>
</div>

将HTTP响应呈现为Angular2中的列表

1 个答案: