for each loop in Angular 2
问题描述:
我正在与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
循环?
答
当数据来自您的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>
+0
它的作品:)谢谢@ParthaSarathiGhosh – Jigarb1992
是你的key1,key2,key3静态文本(永不改变)?或动态文本(可能会更改数据)。 –
钥匙是动态的@ParthaSarathiGhosh – Jigarb1992