Question

我正在处理一个表，在该表中，我需要应用仅在标头包含throw动态时可用的数据可见性。如何做到这一点？

这是我的示例：

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

您也可以为columns遍历td。然后，在每个项目上，您都可以访问对象的属性，例如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>

仅动态应用标题中包含的数据

1 个答案: