ngFor ネストされたループを使用した動的な列ヘッダーと値の HTML th タグと td タグの実装
P粉949267121
2023-08-31 15:23:50
<p>動的 tr と td を使用して HTML テーブルを作成しようとしています。
HTML にネストされたループを追加しました。動的列ヘッダー (th) は正常に機能しますが、値は正しい td に追加されません。</p>
<p>これは私が所有するデータです：</p>
<pre class="brush:php;toolbar:false;">"finalResult": [
{
"テーブル名": "テーブル_1"、
「列カテゴリ」: [
{
"columnnnn": "ユーザー"、
「値」: [
{
"値": "0"
}、
{
「値」: 「10」
}、
{
「値」: 「60」
}、
{
"値": "0"
}、
{
"値": "0"
}、
{
"値": "0"
}、
{
"値": "0"
}、
{
"値": "0"
}、
{
"値": "0"
}
]
}、
{
"columnnnn": "ヘッダー 1"、
「値」: [
{
「値」: 「460」
}
]
}、
{
"columnnnn": "金額"、
「値」: [
{
「値」: 「10」
}、
{
「値」: 「100」
}、
{
「値」: 「50」
}
]
}
]
}、
{
"テーブル名": "テーブル_2"、
「列カテゴリ」: [
{
"columnnnn": "ユーザー"、
「値」: [
{
"値": "07"
}、
{
「値」: 「10」
}
]
}、
{
"columnnnn": "金額"、
「値」: [
{
「値」: 「70」
}
]
}、
{
"columnnnn": "User1"、
「値」: [
{
「値」: 「57」
}
]
}、
{
"columnnnn": "列"、
「値」: [
{
「値」: 「80」
}
]
}、
{
"列nnnn": "列2"、
「値」: [
{
「値」: 「10」
}
]
}
]
}
]</pre>
<p>以下はHTML代コード：</p>
<pre class="brush:php;toolbar:false;"><div *ngFor="finalResult の j を設定します。 i としてインデックスを付けるクラス="">
<div class=""> <span title="{{j.tableNamee}}">テーブル名 : {{j.tableNamee}} </span>
</div>
<div class="">
<table class="テーブル テーブルボーダー">
<みんな>
<tr class="">
<th class=""スコープ = "列" *ngFor="j.colCatalog の k を許可">
{{k.columnnnn}}
</th>
</tr>
<ng-container *ngFor="j.colCatalog の k を許可">
<tr class="">
<div *ngFor="k.values の m を許可""
<td class="">
<div class=""> <スパンタイトル="{{m.value}}"" {{m.value}} </span>
</div>
</td>
</div>
</ng-container>
</tr>
</ng-container>
</tbody>
</テーブル>
</div>
</div></pre>
<p>ここには特定の ts 代コードはありません。私は、上記の形式の操作データに従って、HTML 内で循環利用しているだけです。
<p><strong>これは期待される出力です：</strong>
期待の出力</p>
<p><strong>これは私が得た現在の出力：</strong>
現在前出</p>
<p>どんな帮助将不感激！</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
HTML マークアップが奇妙に見えるのは、
<tr>に<td>をラップする<div>が含まれているためです。これがあなたの問題の原因だと思います。私は試していませんが、
リーリー<table>タグを次のように変更してみてください: