html - 具有动态数据的垂直表

Question

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

我有这个对象数组，我正试图将它绑定(bind)到一个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>