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

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>