[英]HTML th and td tag with nested ngFor loops (with dynamic column headers & values)
我正在尝试使用动态 tr 和 td 创建 HTML 表。 我在 HTML 本身中添加了嵌套循环,动态列标题(th)工作正常但值未添加到正确的 td 中。
这是我的数据:
"finalResult": [
{
"tableNamee": "Table_1",
"colCategories": [
{
"columnnnn": "User",
"values": [
{
"value": "0"
},
{
"value": "10"
},
{
"value": "60"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
},
{
"value": "0"
}
]
},
{
"columnnnn": "Header1",
"values": [
{
"value": "460"
}
]
},
{
"columnnnn": "Amount",
"values": [
{
"value": "10"
},
{
"value": "100"
},
{
"value": "50"
}
]
}
]
},
{
"tableNamee": "Table_2",
"colCategories": [
{
"columnnnn": "User",
"values": [
{
"value": "07"
},
{
"value": "10"
}
]
},
{
"columnnnn": "Amount",
"values": [
{
"value": "70"
}
]
},
{
"columnnnn": "User1",
"values": [
{
"value": "57"
}
]
},
{
"columnnnn": "Column",
"values": [
{
"value": "80"
}
]
},
{
"columnnnn": "Column2",
"values": [
{
"value": "10"
}
]
}
]
}
]
下面是它的 html 代码:
<div *ngFor="let j of finalResult; index as i" class="">
<div class=""> <span title="{{j.tableNamee}}">Table Name : {{j.tableNamee}} </span>
</div>
<div class="">
<table class="table table-bordered">
<tbody>
<tr class="">
<th class="" scope="col" *ngFor="let k of j.colCategories">
{{k.columnnnn}}
</th>
</tr>
<ng-container *ngFor="let k of j.colCategories">
<tr class="">
<ng-container>
<div *ngFor="let m of k.values">
<td class="">
<div class=""> <span title="{{m.value}}"> {{m.value}} </span>
</div>
</td>
</div>
</ng-container>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
没有任何特定的 ts 代码。 我只是以上述格式操作数据并尝试在 HTML 本身中应用循环。 我做错了什么吗?
这是需要的 output:需要 output
这是电流 output 我得到:电流 output
任何帮助,将不胜感激!
您的 HTML 标记看起来很奇怪,因为您的<tr>
包含一个包装<td>
的<div>
。 我认为这就是导致您出现问题的原因。
我没有试过这个,但你可以尝试将你的<table>
标记更改为:
<table class="table table-bordered">
<thead>
<tr class="">
<th class="" scope="col" *ngFor="let k of j.colCategories">
{{k.columnnnn}}
</th>
</tr>
</thead>
<tbody>
<tr class="" *ngFor="let k of j.colCategories">
<td class="" *ngFor="let m of k.values">
<div class="">
<span title="{{m.value}}"> {{m.value}} </span>
</div>
</td>
</tr>
</tbody>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.