Angular 6 如何实现表格内容的动态字段绑定？

你只需要在<tr>里再嵌套一层*ngFor来遍历之前拿到的datakeys，然后通过对象属性访问器（方括号语法）动态获取对应字段的值，就能摆脱硬编码字段名的问题啦。

修改后的完整代码： #

<table>
  <thead>
    <tr>
      <th *ngFor="let datakey of listData[0] | keys">{{ datakey }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let datavalues of listData | values">
      <!-- 新增嵌套*ngFor遍历表头字段，动态取值 -->
      <td *ngFor="let datakey of listData[0] | keys">{{ datavalues[datakey] }}</td>
    </tr>
  </tbody>
</table>

关键细节说明： #

• 内层的*ngFor和表头的遍历逻辑完全一致，保证了列的顺序和表头一一对应
• 使用datavalues[datakey]而非硬编码的datavalues.userId，方括号语法支持用变量作为属性名访问对象属性，完美适配动态字段场景
• 为了避免空数组报错，建议加上Angular的安全导航操作符做空值保护：listData?.[0] | keys，这样当listData为空时不会抛出异常

内容的提问来源于stack exchange，提问作者user9855223