如何在Angular中使用ngFor遍历嵌套对象并展示数据

你遇到的问题很典型——ngFor是专门用来迭代数组的，而你的数据是一层套一层的对象链（parent→subParent→...直到null），直接用ngFor肯定行不通。下面给你两种实用的解决办法，按需选择：

方法一：先把嵌套对象转成数组，再用ngFor遍历 #

这种方法适合需要把所有层级数据平铺展示的场景，我们可以在组件里写一个函数，把嵌套的name依次提取到数组里，再用ngFor遍历这个数组。

组件代码（.ts） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-nested-data',
  templateUrl: './nested-data.component.html',
})
export class NestedDataComponent {
  content = [
    {
      "id":1,
      "name":"test",
      "parent":{
        "name":"test2",
        "subParent":{
          "name":"test3",
          "subParent":{
            "name":"test4",
            "subParent":{
              "name":"test5",
              "subParent":null
            }
          }
        }
      }
    }
  ];

  // 提取所有层级的名称到数组
  getHierarchyNames(item: any): string[] {
    const names = [item.name];
    let currentNode = item.parent;
    // 循环遍历直到没有下一级
    while (currentNode) {
      names.push(currentNode.name);
      currentNode = currentNode.subParent;
    }
    return names;
  }
}

模板代码（.html） #

<div *ngFor="let item of content">
  <p>ID: {{ item.id }}</p>
  <p>层级名称列表：</p>
  <ul>
    <!-- 遍历转换后的数组 -->
    <li *ngFor="let name of getHierarchyNames(item)">{{ name }}</li>
  </ul>
</div>

方法二：用递归模板动态渲染嵌套结构 #

如果需要保留层级缩进的展示效果（比如树形结构），可以用Angular的ng-template和ngTemplateOutlet做递归渲染，自动处理任意深度的嵌套。

模板代码（.html） #

<div *ngFor="let item of content">
  <p>ID: {{ item.id }}</p>
  <!-- 定义递归模板，接收当前节点数据 -->
  <ng-template #recursiveRender let-node>
    <p>{{ node.name }}</p>
    <!-- 判断是否有下一级节点，有的话递归渲染 -->
    <ng-container *ngIf="node.parent || node.subParent">
      <div style="margin-left: 20px;">
        <ng-container 
          *ngTemplateOutlet="recursiveRender; context: { $implicit: node.parent || node.subParent }"
        ></ng-container>
      </div>
    </ng-container>
  </ng-template>
  <!-- 启动递归，传入最外层节点 -->
  <ng-container *ngTemplateOutlet="recursiveRender; context: { $implicit: item }"></ng-container>
</div>

说明 #

• ng-template定义了重复渲染的模板，let-node用来接收传入的节点数据；
• ngTemplateOutlet负责调用模板本身，实现递归；
• margin-left: 20px是为了让子层级缩进，更直观展示嵌套关系，你可以根据需求调整样式。

为什么直接用ngFor不行？ #

再强调下：ngFor的核心要求是迭代对象必须是数组或者类数组（实现了Iterable接口），而你的数据是嵌套的普通对象链，没有可迭代的结构，所以直接用ngFor会报错或者无效果。上面两种方法本质都是把嵌套对象转换成可迭代/可递归处理的结构，适配ngFor或者Angular的模板机制。

备注：内容来源于stack exchange，提问作者kubare