Question

我正在开发一个 Angular 2 的项目。
在我的一个场景中，我从API调用中获取了Array。
数组如下：
[{'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循环？

Answer 1

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

Angular 2中的forEach循环

1 个答案: