仅应用 header 包含的动态数据

Question

我正在使用 table，其中我需要应用仅适用于 header 的数据可见性包含抛出动态。如何实现？

这是我的例子：

columns = ['name', 'age']; //required fields declared. on change I need to update the data as well

html:

<table>
  <tr>
    <th *ngFor="let col of columns">{{col}}</th>
  </tr>
  <tr *ngFor="let item of data"> 
    <td >{{item.name}}</td> //how to apply from header instead of manual
    <td >{{item.age}}</td> //how to apply from header instead of manual
  </tr>
</table>

期待喜欢：

<tr *ngFor="let col of columns"> 
        <td >{{data('col')}</td> //name value  
        <td >{{data('col')}</td> //age value  
      </tr>
    </table>

Live Demo

Answer 1

对于 td，您也可以循环遍历 columns。然后在每个项目上，您可以访问对象的属性，例如 item[column]

试一试：

<table>
  <tr>
    <th *ngFor="let col of columns; let i = index">{{setHeader(col, i)}}</th>
  </tr>
  <tr *ngFor="let item of data">
    <td *ngFor="let column of columns">{{item[column]}}</td>
  </tr>
</table>

仅应用 header 包含的动态数据

apply data only from header contains by dynamic

angular

html-table

ngfor