角度2動態列數據表

Question

目前，我有一個帶有硬編碼的列標題並填充數據的數據表。我想更改此表使其動態，以便用戶可以選擇要構建表的列。 我想知道我將如何或以何種方式更改json對象，以確保創建動態列數據表。

這是我嘗試過的，但是沒有加載數據。

<table>
  <thead>
    <tr>
      <th *ngFor="let col of columnArray">{{col}}</th>
    </tr>
  </thead>
<table>
<tbody>
   <tr *ngFor="let col of columnArray">
      <td *ngFor="let data of columnData"> {{col.data}} </td>
   </tr>
</tbody>

目前，由於我的表格數據來自具有硬編碼標題的一個對象，因此這是我當前的工作對象：

data = [ {'id': 'idValue', 'name': 'nameValue', 'date': 'dateValue', 'description': 'descriptionValue'}, ...
]

但是由於我不知道用戶將選擇哪些列來創建表，因此它可能是列：ID，名稱，描述。 或欄：編號，名稱。 我需要靈活的數據，以便當用戶選擇要在表中顯示的列時

Answer 1

數據的工作格式：

columnArray = [ {'header': 'headerValue', 'data': 'dataValue'}, ...
]

然后，模板可以是：

<table>
    <thead>
       <tr><th *ngFor="let col of columnArray">{{col.header}}></th></tr>
    </thead>
    <tbody>
        <tr>
           <td *ngFor="let col of columnArray"> {{col.data}} </td>
        </tr>
    </tbody>
</table>

如果可以提供數據格式，則可以提供更多合適的解決方案。

編輯＃1：

根據您的數據格式，我將從數據數組中的對象中提取標頭的鍵。

headers = Object.keys(data[0]);

那么html應該是：

<table>
   <thead>
      <tr><th *ngFor="let col of headers">{{col}}></th></tr>
   </thead>
   <tbody>
      <tr *ngFor="let obj of data">
         <td *ngFor="let col of headers"> {{obj[col]}} </td>
      </tr>
   </tbody>
</table>