将动态JSON数组的所有键和值读取到Angular中的表中

Question

我有一个这样的JSON。

{[{id:1,Name:'alex',age:10},{id:2,Name:'John',age:20}...]}

所以我的要求是创建一个像这样的表

id    Name    Age
-------------------
1     Alex    10
2     John    20
-----------------

如果JSON始终相同，我可以创建这样的接口，并可以使用数组

export interface Details{
id:number;
Name:string;
Age:number;
}

但我担心的是JSON会有所不同。所以我们不能总是定义什么是JSON数据结构

这意味着有时JSON将是

[{School:'School1', City:'East Ham',Students:2000},{School:'School2', City:'Whitechapel',Students:3000}]

表格将是

School      City     Students
------------------------------
School1    East Ham    2000
School2    Whitechapel 3000
------------------------------------

因此，任何类型的数据都会出现，但完全不同。

那么如何处理这种情况来生成这样的表

<table>
<thead>
<tr><th *ngFor="let item of headers:let index=index">{{item}}</th></tr>
</thead>
<tbody>
<tr *ngFor="let row of data"><td *ngFor="let col of row">{{col}}</td></tr>
</tbody>
</table>

不知道数据会如何。请帮助

Answer 1

您可以执行以下操作：

<table style="border-collapse: collapse; font-size: 14px;">
<tr>
<th style="text-transform: capitalize; border: 1px solid black; padding: 8px;" 
*ngFor="let item of yourData[0] | keyvalue">
{{ item.key }}
</th>
</tr>
<tr *ngFor="let a of yourData | keyvalue">
<ng-container *ngFor="let b of a.value | keyvalue">
<td style="border: 1px solid black; padding: 8px;">
{{ b.value }}
</td>
</ng-container>
</tr>
</table>

其中yourData是您的json响应数据。