Angular 13树形结构NgFor循环异常问题求助

问题根源 #

你遇到的两种示例问题，核心都是没正确处理树形结构的递归渲染逻辑：

• Example 1 嵌套父级 details 内时，子节点的 NgFor 无法识别正确的节点上下文，导致循环未触发；
• Example 2 移到父级外后，循环遍历的是整个根节点数组而非当前父节点的子节点，引发重复渲染。

正确实现方案：递归模板渲染 #

利用 Angular 的递归模板引用，能精准处理树形层级的循环渲染，同时避免上述问题。

1. 标准树形数据结构（TS 代码）

确保每个节点包含 children 数组存储子节点：

interface TreeNode {
  id: number;
  label: string;
  children?: TreeNode[];
}

treeData: TreeNode[] = [
  {
    id: 1,
    label: '父节点1',
    children: [
      { id: 11, label: '子节点1-1' },
      { id: 12, label: '子节点1-2', children: [{ id: 121, label: '孙节点1-2-1' }] }
    ]
  },
  {
    id: 2,
    label: '父节点2',
    children: [{ id: 21, label: '子节点2-1' }]
  }
];

2. 递归模板渲染（HTML 代码）

通过 ngTemplateOutlet 递归调用模板，确保每个层级的循环上下文正确：

<!-- 遍历根节点，初始化递归模板 -->
<ng-container *ngFor="let node of treeData">
  <ng-template [ngTemplateOutlet]="treeNodeTemplate" [ngTemplateOutletContext]="{ $implicit: node }"></ng-template>
</ng-container>

<!-- 递归模板：渲染单个节点 + 子节点 -->
<ng-template #treeNodeTemplate let-node>
  <details>
    <summary>{{ node.label }}</summary>
    <!-- 子节点区域，缩进区分层级 -->
    <div style="padding-left: 20px;">
      <ng-container *ngIf="node.children && node.children.length > 0">
        <!-- 遍历当前节点的子节点，递归调用模板 -->
        <ng-container *ngFor="let child of node.children">
          <ng-template [ngTemplateOutlet]="treeNodeTemplate" [ngTemplateOutletContext]="{ $implicit: child }"></ng-template>
        </ng-container>
      </ng-container>
    </div>
  </details>
</ng-template>

方案优势 #

• 递归模板 treeNodeTemplate 负责单个节点的渲染逻辑，自动识别子节点并递归渲染，确保每个 NgFor 都在正确的节点上下文内循环；
• 用 padding-left 实现层级缩进，直观呈现树形结构的层级关系；
• 完全避免嵌套失效和重复渲染的问题，符合你期望的树形层级效果。

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