动态表列和行 [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>