Angular模板中避免嵌套循环重复内容的技术问询

问题核心在于你错误地使用了原数据列表formListItems作为外层循环的数据源——原列表中每个带相同formId的项都会触发一次分组数据的遍历，自然导致内容重复。下面是两种直接有效的解决方案：

方案1：组件内提取分组ID数组 #

先在组件中将分组后的formId提取为独立数组，供模板遍历：

// 组件.ts文件
groupedFormListItems = {
    "8979f9879f": [
        { id: 1, name: 'Test 1', formId: '8979f9879f' },
        { id: 2, name: 'Test 2', formId: '8979f9879f' }
    ],
    "a8098981": [
        { id: 3, name: 'Test 3', formId: 'a8098981' }
    ]
};
// 提取所有formId组成数组
formIds = Object.keys(this.groupedFormListItems);

模板中直接遍历formIds，按ID匹配对应分组数据：

<ng-container *ngFor="let formId of formIds; index as i">
    <!-- 仅在非第一个分组前显示分隔线 -->
    <hr *ngIf="i > 0" style="border: none; border-top: 1px solid #ccc; margin: 1rem 0;">
    
    <!-- 同一formId的表格布局 -->
    <table border="1" cellpadding="8" cellspacing="0">
        <tbody>
            <tr *ngFor="let item of groupedFormListItems[formId]">
                <td>{{ item.name }}</td>
            </tr>
        </tbody>
    </table>
</ng-container>

方案2：使用Angular自带KeyValuePipe #

无需在组件额外处理，直接用KeyValuePipe遍历分组对象的键值对：

<ng-container *ngFor="let group of groupedFormListItems | keyvalue; index as i">
    <!-- 分隔线逻辑同上 -->
    <hr *ngIf="i > 0" style="border: none; border-top: 1px solid #ccc; margin: 1rem 0;">
    
    <table border="1" cellpadding="8" cellspacing="0">
        <tbody>
            <tr *ngFor="let item of group.value">
                <td>{{ item.name }}</td>
            </tr>
        </tbody>
    </table>
</ng-container>

原代码重复原因说明 #

假设原formListItems包含3个项（id1、id2、id3），原循环逻辑会执行3次：

1. 第一次遍历（item为id1，formId=8979f9879f）：输出Test1、Test2
2. 第二次遍历（item为id2，formId=8979f9879f）：再次输出Test1、Test2
3. 第三次遍历（item为id3，formId=a8098981）：输出Test3
   最终导致前两组内容重复。

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