for each loop in Angular 2

2017-03-16 133 views 3 likes

我正在与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
for each loop in Angular 2

所以，我的问题是如何获取的key从阵列

的value是否有任何forEach循环？

来源

2017-03-16 Jigarb1992

是你的key1，key2，key3静态文本（永不改变）？或动态文本（可能会更改数据）。 –

钥匙是动态的@ParthaSarathiGhosh – Jigarb1992

回答

当数据来自您的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>

来源

2017-03-16 11:12:14

它的作品:)谢谢@ParthaSarathiGhosh – Jigarb1992

for each loop in Angular 2

回答

相关问题