在 Angular2 中将 HTTP-Response 呈现为列表

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>

在 Angular2 中将 HTTP-Response 呈现为列表

Render HTTP-Response as a list in Angular2

json

ngfor

angular