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

【问题标题】：Angular How to display unstructured data as tableAngular如何将非结构化数据显示为表格
【发布时间】：2018-05-07 13:38:18
【问题描述】：

我正在开发 Angular 5。对此我很陌生，所以我不确定它是否已经存在。

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

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

【问题讨论】：

您的数组中的对象是否总是具有相同数量的键？
没有。它们可以有任意数量的键。我也知道这是一个扁平的结构。

标签： angular

【解决方案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 并检查结果。

【讨论】：

【解决方案2】：

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

<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;
    }
}

【讨论】：