带有动态数据的垂直表

Question

似乎与 AngularJS "Vertical" ng-repeat 的要求相同，但解决方案不适用于 *ngFor

我有这个object array，我正在尝试绑定到一个 HTML 表格。它的格式如下：

[
 {
   "Animal":"Dog",
   "Country":"France",
   "Food":"Tofu",
   "Car":"Nano",
   "Language":"TypeScript"
 }
]

现在可以简单地以默认的 HTML 水平表格方式格式化，如下所示：

<table>
  <tr>
    <th>Animal</th>
    <th>Country</th>
    <th>Food</th>
    <th>Car</th>
    <th>Language</th>
  </tr>
  <tr *ngFor="let data of datas">
    <td>{{data.Animal}}</td>
    <td>{{data.Country}}</td>
    <td>{{data.Food}}</td>
    <td>{{data.Car}}</td>
    <td>{{data.Language}}</td>
  </tr>
</table>

这将创建如下表（请忽略表中的数据；它只是提供一个想法。）：

但是我将如何使用动态数据（一种垂直表）创建这样的结构：

Answer 1

在组件中：

this.arrayOfKeys = Object.keys(this.datas[0]);

html:

<table>
    <tr *ngFor="let key of arrayOfKeys">
        <th>{{key}}</th>
        <td *ngFor="let data of datas">
            {{data[key]}}
        </td>
    </tr>
</table>

Answer 2

如果您的数据结构类似于groups[].items[].name，请使用ng-container

所以，如果你想添加行

<table>
    <ng-container *ngFor="let group of groups">
        <tr>
            <td>{{group.name}}</td>
        </tr>
        <tr *ngFor="let item of group.items">
            <td>{{item.name}}</td>
        </tr>
    </ng-container>
</table>

来源：https://stackoverflow.com/a/44086855/1840185