Implementing HTML th and td tags for dynamic column headers and values using ngFor nested loops
P粉949267121
2023-08-31 15:23:50
<p>I'm trying to create an HTML table with dynamic tr and td.
I added a nested loop in the HTML and the dynamic column headers (th) are working fine but the values are not being added to the correct 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>
Your HTML markup looks weird because your
<tr>
contains a<div>
that wraps<td>
. I think this is what is causing your problem.I haven't tried it, but you could try changing your
<table>
tag to the following: