Melaksanakan teg HTML dan td untuk pengepala lajur dinamik dan nilai menggunakan gelung bersarang ngFor

Question

Saya cuba mencipta jadual HTML dengan tr dan td dinamik. Saya menambah gelung bersarang dalam HTML dan pengepala lajur dinamik (th) berfungsi dengan baik tetapi nilainya tidak ditambahkan pada td yang betul.

这是我拥有的数据：

"finalResult": [
        {
            "tableNamee": "Table_1",
            "colCategories": [
                {
                    "columnnnn": "Pengguna",
                    "nilai": [
                        {
                            "nilai": "0"
                        },
                        {
                            "nilai": "10"
                        },
                        {
                            "nilai": "60"
                        },
                        {
                            "nilai": "0"
                        },
                        {
                            "nilai": "0"
                        },
                        {
                            "nilai": "0"
                        },
                        {
                            "nilai": "0"
                        },
                        {
                            "nilai": "0"
                        },
                        {
                            "nilai": "0"
                        }
                    ]
                },
                {
                    "lajurnnn": "Tajuk1",
                    "nilai": [
                        {
                            "nilai": "460"
                        }
                    ]
                },
                {
                    "lajurnnn": "Jumlah",
                    "nilai": [
                        {
                            "nilai": "10"
                        },
                        {
                            "nilai": "100"
                        },
                        {
                            "nilai": "50"
                        }
                    ]
                }
            ]
        },
        {
            "tableNamee": "Table_2",
            "colCategories": [
                {
                    "columnnnn": "Pengguna",
                    "nilai": [
                        {
                            "nilai": "07"
                        },
                        {
                            "nilai": "10"
                        }
                    ]
                },
                {
                    "lajurnnn": "Jumlah",
                    "nilai": [
                        {
                            "nilai": "70"
                        }
                    ]
                },
                {
                    "lajurnnn": "Pengguna1",
                    "nilai": [
                        {
                            "nilai": "57"
                        }
                    ]
                },
                {
                    "lajurnnn": "Lajur",
                    "nilai": [
                        {
                            "nilai": "80"
                        }
                    ]
                },
                {
                    "lajurnnn": "Lajur2",
                    "nilai": [
                        {
                            "nilai": "10"
                        }
                    ]
                }
            ]
        }
    ]

以下是HTML代码：

<div *ngFor="let j of finalResult; indeks sebagai i" kelas="">
    <div class=""> <span title="{{j.tableNamee}}">Nama Jadual : {{j.tableNamee}} </span>
    </div>
    
    <div class="">
        <table class="table table-bordered">
            <tbody>
                <tr class="">
                    <kelas ke="" skop="col" *ngFor="biarkan k daripada j.colCategories">
                        {{k.columnnnn}}
                    </th>
                </tr>
                <ng-bekas *ngFor="biarkan k daripada j.colCategories">
                    <tr class="">
                        <ng-bekas>
                            <div *ngFor="biarkan m daripada k.nilai">
                                <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中尝试在HTML中应用。吗？

这是期望的输出： 期望的输出

这是我得到的当前输出： 当前输出

任何帮助将不胜感激！

Answer 1

Penanda HTML anda kelihatan pelik kerana <tr>包含一个包裹<td>的<div> anda. Saya rasa ini yang menyebabkan masalah anda.

Saya belum mencubanya, tetapi anda boleh cuba menukar tag <table> anda kepada yang berikut:

<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>