使用ngFor嵌套循环实现动态列标题和值的HTML th和td标签
<p>我正在尝试创建带有动态tr和td的HTML表格。
我在HTML中添加了嵌套循环，动态列标题（th）工作正常，但值没有添加到正确的td中。</p>
<p>这是我拥有的数据：</p>
<pre class="brush:php;toolbar:false;">"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"
}
]
}
]
}
]</pre>
<p>以下是HTML代码：</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>这里没有特定的ts代码。我只是按照上述格式操作数据，并尝试在HTML中应用循环。我做错了什么吗？</p>
<p><strong>这是期望的输出：</strong>
期望的输出</p>
<p><strong>这是我得到的当前输出：</strong>
当前输出</p>
<p>任何帮助将不胜感激！</p>
1
941
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
你的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>