Angular 2嵌套ngFor失效，控制台提示对象无法迭代错误求解决

刚碰到这个错误的时候我也头疼过，其实问题根源已经在报错信息里说得明明白白了：你给*ngFor绑定的是一个普通对象（[object Object]），但*ngFor只能遍历可迭代的集合（比如数组、Set这类），普通对象是没法直接遍历的。尤其是嵌套ngFor的场景，大概率是内层循环的数据源搞错了类型。

下面给你几种针对性的解决方案：

1. 先检查你的数据源结构 #

先确认你要遍历的那部分数据是不是真的是数组。比如你可能从后端拿到的响应是类似这样的：

// 示例：内层courses是对象而非数组
const orderData = {
  id: 1,
  user: "张三",
  courses: {
    math: { name: "数学", score: 90 },
    english: { name: "英语", score: 85 }
  }
};

这里的courses就是一个对象，直接用*ngFor遍历肯定会报错，得先把它转换成数组。

2. 把对象转换成可迭代数组的几种方法 #

方法一：用Object.keys()手动转换（组件内处理） #

在你的组件类里写一个方法，把对象转成包含键和值的数组：

getCourseList(coursesObj: any): any[] {
  // 先取对象的所有键，再映射成包含键和值的新数组
  return Object.keys(coursesObj).map(key => ({
    key: key,
    ...coursesObj[key]
  }));
}

然后在模板里调用这个方法：

<!-- 外层循环遍历订单列表 -->
<div *ngFor="let order of orders">
  <h4>订单ID: {{order.id}}</h4>
  <!-- 内层循环调用方法转成数组后遍历 -->
  <div *ngFor="let course of getCourseList(order.courses)">
    课程：{{course.name}} | 分数：{{course.score}}
  </div>
</div>

方法二：自定义管道（推荐，性能更优） #

上面的方法在模板里调用会随着变更检测频繁执行，更推荐写一个自定义管道来处理对象转数组：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'objectToValues' })
export class ObjectToValuesPipe implements PipeTransform {
  transform(value: any): any[] {
    // 先判断是否为对象，避免空值报错
    return value && typeof value === 'object' ? Object.values(value) : [];
  }
}

记得在你的模块里声明这个管道，然后直接在模板里用：

<div *ngFor="let order of orders">
  <h4>订单ID: {{order.id}}</h4>
  <!-- 用管道把对象转成数组 -->
  <div *ngFor="let course of order.courses | objectToValues">
    课程：{{course.name}} | 分数：{{course.score}}
  </div>
</div>

方法三：让后端修正数据结构 #

如果是后端返回的数据格式有问题（应该返回数组的地方返回了对象），直接让后端把courses改成数组格式是最省心的：

{
  "id": 1,
  "user": "张三",
  "courses": [
    {"name": "数学", "score": 90},
    {"name": "英语", "score": 85}
  ]
}

这样就可以直接用*ngFor遍历，不需要额外转换了。

3. 额外避坑提示 #

别忘了处理空值情况，比如数据源可能还没加载完成或者返回null，可以结合*ngIf或者安全导航操作符?.避免额外报错：

<!-- 用*ngIf先判断是否存在 -->
<div *ngFor="let order of orders">
  <h4>订单ID: {{order.id}}</h4>
  <div *ngIf="order.courses">
    <div *ngFor="let course of order.courses | objectToValues">
      课程：{{course.name}} | 分数：{{course.score}}
    </div>
  </div>
</div>

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