arrays - 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
值1 值2 值3
值1 值2 值3
值 1 值 2 值 3

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

有没有forEach循环？

Answer 1

当数据来自您的 API 时

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

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

现在迭代模板中的键数组和 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>