for each loop in Angular 2

Question

我正在與Angular 2合作。
在我的一個場景中，我從API調用中獲取數組。
陣列是這樣的：
[{'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}, {'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}, {'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}]

使用此陣我要創建的表像

key1的鍵2KEY3
值1值2值3
值1值2值3
VALUE1 VALUE2 value3

所以，我的問題是如何獲取的key從陣列

的value是否有任何forEach循環？

Answer 1

當數據來自您的API

您需要創建一個新的KeysArray枝條您的組件在下面的代碼片段。假設每個對象將保持相同的鍵。

keysArray = Object.keys(this.apiData[0]); 

現在按照以下步驟迭代模板中的keys數組和apiData。

<table> 
    <thead> 
     <tr> 
      <th *ngFor="let key of keysArray; let i = index;">{{key}}</th> 
     <tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of apiData;"> 
      <td *ngFor="let key of keysArray;">{{item[key]}}</td> 
     <tr> 
    </tbody> 
</table>