Angular遍历对象数组问题：如何正确展平显示名称列表

问题场景 #

数组结构如下：

const arr = [{name:1},{name:2}, {name: '1234', childrenId: 'id', children: [{name:3},{name:4}]}]

需要将所有name属性展平为独立列表项：

• 1
• 2
• 1234
• 3
• 4

原代码问题 #

使用以下模板渲染时，子项与父项出现重叠：

<div *ngFor="let item of arr;">
   {{ item.name }}
  <ng-container *ngIf="item.childrenId">
     <ng-container *ngFor="let child of item.children">  {{ child.name }} </ng-container>
  </ng-container>
</div>

原因是父项和子项都被包裹在同一个<div>中，没有生成独立的列表项结构，导致内容挤在一起。

解决方案 #

方案1：模板内直接生成独立列表项 #

调整模板结构，让每个name对应单独的<li>标签：

<ul>
  <ng-container *ngFor="let item of arr">
    <!-- 渲染父项name -->
    <li>{{ item.name }}</li>
    <!-- 渲染子项name，无children时不渲染 -->
    <li *ngFor="let child of item.children || []">{{ child.name }}</li>
  </ng-container>
</ul>

方案2：组件内预处理展平数组（推荐） #

在组件逻辑中将原数组展平为线性结构，再直接遍历渲染，模板更简洁：
组件代码：

// 组件内定义
flattenedNames: (string | number)[] = [];
arr = [{name:1},{name:2}, {name: '1234', childrenId: 'id', children: [{name:3},{name:4}]}];

ngOnInit(): void {
  this.flattenedNames = this.arr.reduce((result, item) => {
    result.push(item.name);
    // 存在子数组则追加子项name
    if (item.children) {
      result.push(...item.children.map(child => child.name));
    }
    return result;
  }, []);
}

模板代码：

<ul>
  <li *ngFor="let name of flattenedNames">{{ name }}</li>
</ul>

补充说明 #

提问者后续已将数组改为线性结构，显示恢复正常，方案2的思路与之匹配，能有效避免模板嵌套逻辑，提升代码可读性。

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