Angular 6 - 动态填充表内容值

Question

我从一些json数据填充表。

以下是代码：

<table>
  <thead>
  <tr>
    <th *ngFor="let datakeys of listData[0] | keys">{{ datakeys }}</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let datavalues of listData | values">
    <td>{{ datavalues.userId }}</td>
    <td>{{ datavalues.id }}</td>
    <td>{{ datavalues.title }}</td>
    <td>{{ datavalues.body }}</td>
  </tr>
  </tbody>
</table>

第一个 ngFor 会显示所有表格标题。数据保存在 datakeys 。

中

第二个 ngFor 包含值。

目前您可以看到 datavalues 值的键是硬编码的。

当我需要它时，可以从 datakeys 中取出，所以它就是代码。

我该怎么做？

Answer 1

您可以像使用标题一样使用其他ngFor。

   <tr *ngFor="let datavalues of listData | values">
      <td *ngFor="let key of datavalues | keys">
           {{ datavalues[key]}}
      </td>
   </tr>