Динамически табличные столбцы и строки [Angular 6 + Bootstrap 3]

Question

Мне нужно создавать таблицы с динамически столбцами и строками.У меня есть массив объектов, которые мне нужно представить в таблице.Но таблицу нужно представить в 3 колонках.Например:

        var listItems = [
        { name: 'name1', code: 'code1'},
        { name: 'name2', code: 'code2' },
        { name: 'name3', code: 'code3' },
        { name: 'name4', code: 'code4' }
    ];

И таблица будет выглядеть так:
[name |код] [имя |код] [имя |код]
имя1 код1 имя3 код3 имя4 код4
имя2 код2

Что будет лучшим решением?

Answer 1

Если элементы в массиве одинаковы, вы можете перебирать ключи.

const list_items = [{name:'abc',code:'123'},{name:'def',code:'456'}];

let keys = Object.keys(list_items[0]); // Get the column names

<table>
  <thead>
    <th *ngFor = 'let key of keys'>{{key}}</th>
  <thead>
  <tbody>
    <tr *ngFor = 'let item of list_items'>
      <td *ngFor = 'let key of keys'>{{item[key]}}</td>
    </tr>
  </tbody>
</table>