我无法用循环系统来围绕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
答案 0 :(得分:0)
使用以下代码更新您的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。