如何使用Angular的*ngFor遍历结构不对称的嵌套数组

嘿，这个场景我熟！要遍历这种键名不统一还带嵌套的对象数组，核心就是把对象转成可遍历的数组，然后区分固定字段和动态字段分别处理，咱们一步步来：

1. 先理清楚数据结构 #

你的数组里每个元素混合了两种内容：

• 固定键（比如name）
• 动态命名的嵌套对象键（比如d14042018，对应日期和数值的嵌套对象）

2. 用管道把对象转成数组 #

Angular的*ngFor只能遍历数组，所以得把每个对象的键值对转成数组。你可以用Angular自带的KeyValuePipe，也可以自己写个自定义管道（更灵活）。

方法一：用Angular自带的KeyValuePipe #

这是最快的方式，不用额外写代码：

// 组件里的数组保持不变
obj = [
  { 
    "d14042018": { "date": "14-04-2018", "value": 5 }, 
    "d02042018": { "date": "02-04-2018", "value": 10 }, 
    "name": "my name" 
  }, 
  { 
    "d14042018": { "date": "14-04-2018", "value": 15 }, 
    "d02042018": { "date": "02-04-2018", "value": 20 }
  }
];

模板里这么写：

<!-- 先遍历外层数组 -->
<div *ngFor="let item of obj" class="item-container">
  <!-- 单独处理固定字段name -->
  <div *ngIf="item.name" class="name-field">
    名称：{{ item.name }}
  </div>

  <!-- 遍历转成数组后的对象键值对 -->
  <div *ngFor="let entry of item | keyvalue" class="date-entry">
    <!-- 过滤出动态日期键（比如以d开头的键） -->
    <div *ngIf="entry.key.startsWith('d')">
      日期：{{ entry.value?.date }} | 数值：{{ entry.value?.value }}
    </div>
  </div>
  <hr>
</div>

方法二：自定义管道（更灵活） #

如果需要对转换过程做更多控制（比如过滤、排序），可以自己写个管道：

// object-to-array.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'objectToArray' })
export class ObjectToArrayPipe implements PipeTransform {
  transform(obj: Record<string, any>): { key: string; value: any }[] {
    if (!obj) return [];
    // 直接把对象转成键值对数组，还可以在这里加过滤逻辑
    return Object.entries(obj).map(([key, value]) => ({ key, value }));
  }
}

记得在你的模块里声明这个管道：

// app.module.ts
import { ObjectToArrayPipe } from './object-to-array.pipe';

@NgModule({
  declarations: [
    // ...其他组件
    ObjectToArrayPipe
  ]
})
export class AppModule { }

然后模板里用自定义管道：

<div *ngFor="let item of obj" class="item-container">
  <div *ngIf="item.name">名称：{{ item.name }}</div>
  
  <div *ngFor="let entry of item | objectToArray">
    <div *ngIf="entry.key.startsWith('d')">
      日期：{{ entry.value?.date }} | 数值：{{ entry.value?.value }}
    </div>
  </div>
  <hr>
</div>

3. 注意事项 #

• 用?.安全导航操作符：避免嵌套对象缺失字段时出现报错
• 过滤逻辑可以根据实际情况调整：比如如果动态键不是以d开头，就换个判断条件（比如检查value是否包含date和value属性）

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