在Angular2中呈現HTTP響應列表

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之和客戶名稱的值，並以列表

在這個例子中，有兩個客戶顯示他們，所以這些標記應該渲染的次：

<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>