[英]Dynamic build a table from json data in angular2
I can't wrap my head around a looping system i need to make to build up a table from json data. 我无法将我的头绕在循环系统上,我需要根据json数据构建表。 This is what i've got so far (tried some other stuff but i think this illustrates it the best way). 这就是我到目前为止(尝试过其他一些东西,但是我认为这是最好的方式)。
Looping through the headers works fine, it's just the cells i can't get to work. 循环遍历标题很好,只是我无法工作的单元格。
This is my dummy data: 这是我的虚拟数据:
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",
]
}
]
This is my basic loop as starting point: 这是我的基本循环作为起点:
<tr *ngFor="let row of tableMockData; let i = index">
<td>{{row.rows[i]}}</td>
</tr>
This is my desired outcome: 这是我想要的结果:
Can someone point me out in the right direction, i know wich cell needs to go where but i simply can't wrap my head around how to loop through it. 有人能指出我正确的方向吗,我知道细胞需要走到哪里,但我根本无法绕过如何绕过它。
Thanks :) 谢谢 :)
Update: here is a stackblitz example: https://stackblitz.com/edit/angular-cdoqwb 更新:这是一个stackblitz示例: https ://stackblitz.com/edit/angular-cdoqwb
Update your Html with below code 使用以下代码更新您的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>
You do not properly bind your JSON. 您没有正确绑定JSON。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.