Question

我正在研究Angular 5.这是一个新手，所以我不确定它是否已经存在。

在我的component.ts中，我有一个流响应$。那里的数据是一个数组。数组中的每个元素都是未知的。所以数据可以是[{id：1，name：'test'}，{id：2，name：'test2'}]或[{label：'abc'，desc：'abc'}，{label：'def '，desc：'def'}]

所以我只知道它是一个数组。如何在Angular中将此数据结构显示为表格？有人可以提出一些如何开始的想法吗？

Answer 1

如果您的对象总是与每个对象相同，我们可以执行以下操作：

首先读取唯一键：

//identify unique keys in the array
    for (var key in this.arr1[0]) {
      if (this.arr1[0].hasOwnProperty(key)) {
        this.columnsArr.push(key);
      }
    }

然后像这样迭代：

<table style="width:100%">
    <tr>
        <th *ngFor="let header of columnsArr">{{header}}</th>
    </tr>
    <tr *ngFor="let data of arr1">
        <td>{{data[columnsArr[0]]}}</td>
        <td>{{data[columnsArr[1]]}}</td>
    </tr>
</table>

这是工作stackblitz 您可以替换arr1并检查结果。

Answer 2

我想出了一个解决方案。首先，创建一个Angular Pipe以从地图中提取键。然后我们使用ngFor遍历数组并使用密钥。

<table>
    <tr *ngFor="let row of data | async">
        <td *ngFor="let key of row | mapKeys">{{row[key]}}</td>
    </tr>
</table>

因此新创建的管道名为mapKeys。这是代码

import { Pipe, PipeTransform } from '@angular/core';
import _ from 'lodash';

@Pipe({name: 'mapKeys'})
export class MapKeysPipe implements PipeTransform {
    transform(map: Map<any, any>): Array<any> {
        let res = [];
        _.forEach(map, (val, key) => {
            res.push(key);
        });
        return res;
    }
}

Angular如何将非结构化数据显示为表

2 个答案: