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>