Angular 2中的forEach循环

Question

我正在使用Angular 2进行项目开发。
在我的某个场景中，我从API调用中获取了一个数组。
数组如下：
[{'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}, {'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}, {'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}]

我想要使用这个数组创建表格，如下所示：

key1 key2 key3
value1 value2 value3
value1 value2 value3
value1 value2 value3

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

是否有任何forEach循环？

- Jigarb1992

---

你的key1、key2、key3是静态文本（永远不会改变）还是动态文本（可能会随数据而改变）？ - Partha Sarathi Ghosh

密钥是动态的 @ParthaSarathiGhosh - Jigarb1992

Answer 1

当数据来自您的API时

您需要在您的组件中使用以下代码片段创建一个新的KeysArray。假设每个对象将拥有相同的键。

```javascript const KeysArray = Object.keys(data[0]); ```

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>

- Partha Sarathi Ghosh