Question

我需要创建具有动态列和行的表。我有一个对象数组，需要在表中显示。但是表格需要分三列显示。例如：

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

表格看起来像是：
[名称|代码] [名称|代码] [名称|代码]
名称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>

动态表的列和行[Angular 6 + Bootstrap 3]

1 个答案: