Angular 6 - 动态填充 table 内容值

Question

我正在从一些 json 数据中填充 table。

代码如下：

<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 将显示所有 table 标题。数据保存在 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>

Angular 6 - 动态填充 table 内容值

Angular 6 - Populating the table content values dynamically

typescript

angular

angular6