Angular Как отобразить неструктурированные данные в виде таблицы

Question

Я работаю над Angular 5. Совершенно новичок в этом, поэтому я не уверен, есть ли он уже там или нет.

В моем component.ts у меня есть ответ потока $. Данные там есть массив. Каждый элемент в массиве неизвестен. Таким образом, данные могут быть [{id: 1, name: 'test'}, {id: 2, name: 'test2'}] или [{label: 'abc', desc: 'abc'}, {label: 'def ', desc:' def '}]

Так что я знаю только, что это массив. Как я могу отобразить эту структуру данных в виде таблицы в Angular? Может кто-нибудь пролить идеи как начать?

Answer 1

Я придумал решение. Сначала создайте 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;
    }
}

Answer 2

Если ваши объекты всегда идентичны, мы можем сделать что-то вроде этого:

Первые прочитанные уникальные ключи:

//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 и проверить результат.