Angular动态表格问题：列值无法正确匹配td的求助

尝试创建包含动态<tr>和<td>的HTML表格，动态表头(<th>)显示正常，但数据无法正确填入对应<td>中。未编写额外TS逻辑，仅通过HTML嵌套循环处理数据。

数据结构 #

"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"}]
            }
        ]
    }
]

当前HTML代码 #

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

问题根源 #

当前循环逻辑完全错误：外层遍历每一列(colCategories)，再为该列的每个值生成一行<tr>，导致每一行仅包含单列的一个值，无法形成横向对应表头的完整行。

修复方案 #

1. 预处理数据（TS逻辑） #

先在组件中将数据转换为"行优先"结构，为每个表格生成rows数组，每个元素对应一行的所有单元格值：

this.finalResult.forEach(table => {
    // 计算表格最大行数（取各列values数组的最大长度）
    const maxRowCount = Math.max(...table.colCategories.map(col => col.values.length));
    // 生成每一行的数据
    table.rows = Array.from({ length: maxRowCount }, (_, rowIndex) => {
        return table.colCategories.map(col => {
            // 取当前行索引对应的值，无对应值则填空字符串
            return col.values[rowIndex]?.value || '';
        });
    });
});

2. 修改HTML模板 #

基于预处理后的rows数组渲染表格：

<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>
                <!-- 遍历预处理后的行数据 -->
                <tr *ngFor="let row of j.rows">
                    <td *ngFor="let cell of row" class="">
                        <span title="{{cell}}"> {{cell}} </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

效果说明 #

修复后，表格会按行渲染，每一行对应各列相同索引位置的值，列长度不足的位置自动填充空值，完全匹配期望的表格结构。

内容的提问来源于stack exchange，提问作者Sammy UFO