Angular 2 中的 forEach 循环答案

【问题标题】：forEach loop in Angular 2Angular 2 中的 forEach 循环
【发布时间】：2017-08-07 11:37:13
【问题描述】：

我正在使用 Angular 2 开发一个项目。
在我的一种情况下，我从 API 调用中获取了数组。
数组就像：
[{'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}, {'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}, {'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}]

使用这个数组我想创建像

key1 key2 key3
值1 值2 值3
值1 值2 值3
值1 值2 值3

所以，我的问题是如何从数组中获取 key 和 value

有forEach循环吗？

【问题讨论】：

您的 key1,key2,key3 是静态文本（永不更改）吗？或动态文本（数据可能会发生变化）。
键是动态的@ParthaSarathiGhosh

标签： arrays angular

【解决方案1】：

当数据来自您的 API 时

您需要在组件上使用以下代码 sn-p 创建一个新的 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>

【讨论】：