仍然学习Angular(版本8)。我有以下JSON
{layer1 : [
{
id: 'lay1',
name: 'first layer',
results:
[
{ rows: [{ col1: '0', description: 'any'}, {col1: '0b', description: 'meh'}] },
{ rows: [{ col1: '1', description: 'some'}] },
]
}
]
, layer2: [
{
id: 'lay2',
name: 'second layer'
results:
[
{ rows: [{ col1: '7', description: 'more'}] },
{ rows: [{ col1: '8', description: 'none'}] },
]
}
]
}
结果应该是这样的表
<table id='lay1'>
<tr>
<td>0 </td>
<td>any</td>
</td>
<tr>
<td>0b </td>
<td>meh</td>
</td>
<tr>
<td>1</td>
<td>some</td>
</td>
</table>
<table id='lay2'>
<tr>
<td>7 </td>
<td>more</td>
</td>
<tr>
<td>8</td>
<td>none</td>
</td>
</table>
注:结果行列可以更改(有时为2列,有时为4列)并更改名称(可以是'col1',但可以是'ident'或任何其他名称)。我已经尝试了几种选择,但是我坚持了这一点。任何帮助,高度赞赏
尝试一下-
<table *ngFor='let tableItem of data | keyvalue' [id]='tableItem?.value[0]?.id'>
<tr *ngFor='let rowItem of tableItem?.value[0]?.results; let rowIndex = index'>
<td *ngFor='let colItem of rowItem?.rows; let colIndex = index'>
{{colItem?.col1}}
{{colItem?.description}}
</td>
</tr>
</table>