Angular 17内层@for中递归模板失效问题求助

问题根源 #

你遇到的TypeError: newCollection[Symbol.iterator] is not a function错误，是因为递归调用时传递给模板的是单个Group对象，但模板中的@for循环要求遍历可迭代的数组。同时仅显示顶层内容，是因为子级递归传递的参数不符合模板的数组输入预期。

你的模板设计是接收Groups数组并遍历渲染，但递归时错误地传递了单个subGroup对象而非subGroups数组，导致@for无法迭代对象，子级渲染失败。

修复方案 #

调整递归逻辑：模板接收Groups数组，遍历每个Group后，直接将该Group的subGroups数组传入递归模板，无需额外嵌套@for遍历subGroups。

修改后的模板代码 #

<ng-template #recursiveGroups let-groups>
  @for (group of groups; track group.id) { <!-- 使用唯一ID作为跟踪标识，避免索引问题 -->
    <!-- 渲染当前Group的内容 -->
    <div>
      <span>Group: {{ group.name }}</span>
      <!-- 可选：渲染children内容 -->
      @if (group.children && group.children.length) {
        <div style="margin-left: 15px;">
          @for (child of group.children; track child.id) {
            <span>Child: {{ child.name }}</span>
          }
        </div>
      }
    </div>

    <!-- 递归渲染子Groups：直接传入group.subGroups数组 -->
    @if (group.subGroups && group.subGroups.length > 0) {
      <div style="margin-left: 20px;">
        <ng-container *ngTemplateOutlet="recursiveGroups; context:{$implicit: group.subGroups}"></ng-container>
      </div>
    }
  }
</ng-template>

<ng-container *ngTemplateOutlet="recursiveGroups; context:{$implicit: data}"></ng-container>

关键调整点 #

1. 移除嵌套的subGroups遍历：原代码内层@for (subGroup of group.subGroups)是多余的，递归模板本身会遍历传入的数组，直接传递group.subGroups即可。
2. 传递数组而非单个对象：递归调用时确保传入group.subGroups数组，符合模板接收数组的预期，避免迭代错误。
3. 添加空值判断：用@if判断group.subGroups是否存在且非空，避免传入空数组或undefined导致无效循环。
4. 优化track表达式：使用Group的唯一ID（如group.id）代替对象或索引，提升渲染性能并避免跟踪错误。

验证逻辑 #

• 初始调用传入data数组，模板遍历所有顶层Group。
• 每个Group渲染完成后，若存在subGroups数组，将其传入递归模板渲染下一层子Group。
• 以此类推，实现完整的递归渲染。

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