仅从标题应用数据包含动态答案

【问题标题】：apply data only from header contains by dynamic仅从标题应用数据包含动态
【发布时间】：2019-11-23 17:30:55
【问题描述】：

我正在使用一个表，我需要在其中应用仅适用于标题包含抛出动态的数据可见性。如何做到这一点？

这是我的例子：

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

【问题讨论】：

标签： angular html-table ngfor

【解决方案1】：

您也可以通过 columns 循环访问 td。然后在每个项目上，您可以访问 Object 的属性，例如 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>

【讨论】：