[英]Dynamic build a table from json data in angular2
我无法将我的头绕在循环系统上,我需要根据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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.