我无法绕过一个循环系统,我需要从json数据构建一个表。这是我到目前为止所做的(尝试了一些其他的东西,但我认为这说明了最好的方法)。
通过标题循环工作正常,它只是我无法工作的单元格。
这是我的虚拟数据:
tableMockData = [
{
"header": "TH 1",
"rows": [
"TH1 - row1",
"TH1 -row2",
"TH1 - row3",
"TH1 - row4"
]
},
{
"header": "TH 2",
"rows": [
"TH2 -row1",
"TH2 - row2",
"TH2 - row3",
"TH2 - row4",
]
},
{
"header": "TH 3",
"rows": [
"TH3 -row1",
"TH3 - row2",
"TH3 - row3",
"TH3 - row4",
]
},
{
"header": "TH 4",
"rows": [
"TH4 - row1",
"TH4 - row2",
"TH4 - row3",
"TH4 - row4",
]
}
]
这是我的基本循环作为起点:
<tr *ngFor="let row of tableMockData; let i = index">
<td>{{row.rows[i]}}</td>
</tr>
有人能指出我正确的方向,我知道哪个细胞需要去哪里,但我根本无法绕过如何循环它。
谢谢 :)
更新:这是一个stackblitz示例:https://stackblitz.com/edit/angular-cdoqwb
使用以下代码更新您的Html
<table>
<tr>
<th *ngFor="let row of tableMockData; let i = index">{{row.header}}
</th>
</tr>
<tr *ngFor="let row of tableMockData; let i = index">
<td *ngFor="let row1 of row.rows">
{{row1}}
</td>
</tr>
</table>
您没有正确绑定您的JSON。