Implementierung der HTML-Tags th und td für dynamische Spaltenüberschriften und -werte mithilfe verschachtelter ngFor-Schleifen

Question

Ich versuche eine HTML-Tabelle mit dynamischem tr und td zu erstellen. Ich habe im HTML eine verschachtelte Schleife hinzugefügt und die dynamischen Spaltenüberschriften (th) funktionieren einwandfrei, aber die Werte werden nicht zum richtigen td hinzugefügt.

这是我拥有的数据:

"finalResult": [
        {
            "tableNamee": "Table_1",
            "colCategories": [
                {
                    "columnnnn": "Benutzer",
                    "Werte": [
                        {
                            "Wert": "0"
                        },
                        {
                            "Wert": "10"
                        },
                        {
                            "Wert": "60"
                        },
                        {
                            "Wert": "0"
                        },
                        {
                            "Wert": "0"
                        },
                        {
                            "Wert": "0"
                        },
                        {
                            "Wert": "0"
                        },
                        {
                            "Wert": "0"
                        },
                        {
                            "Wert": "0"
                        }
                    ]
                },
                {
                    "columnnnn": "Header1",
                    "Werte": [
                        {
                            "Wert": "460"
                        }
                    ]
                },
                {
                    "columnnnn": "Betrag",
                    "Werte": [
                        {
                            "Wert": "10"
                        },
                        {
                            "Wert": "100"
                        },
                        {
                            "Wert": "50"
                        }
                    ]
                }
            ]
        },
        {
            "tableNamee": "Table_2",
            "colCategories": [
                {
                    "columnnnn": "Benutzer",
                    "Werte": [
                        {
                            "Wert": "07"
                        },
                        {
                            "Wert": "10"
                        }
                    ]
                },
                {
                    "columnnnn": "Betrag",
                    "Werte": [
                        {
                            "Wert": "70"
                        }
                    ]
                },
                {
                    "columnnnn": "Benutzer1",
                    "Werte": [
                        {
                            "Wert": "57"
                        }
                    ]
                },
                {
                    "columnnnn": "Spalte",
                    "Werte": [
                        {
                            "Wert": "80"
                        }
                    ]
                },
                {
                    "columnnnn": "Column2",
                    "Werte": [
                        {
                            "Wert": "10"
                        }
                    ]
                }
            ]
        }
    ]

以下是HTML代码:

<div *ngFor="let j of finalResult; Index wie ich" class="">
    <div class=""> <span title="{{j.tableNamee}}">Tabellenname: {{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中应用循环.我做错了什么吗？

这是期望的输出: 期望的输出

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

任何帮助将不胜感激！

Answer 1

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