Angular 7取数报错：NgFor仅支持绑定数组等可迭代对象

这个错误的核心原因很明确：*ngFor只能遍历可迭代的数组，但你当前赋值给userService.users的不是数组，而是一个普通对象——大概率是你的API返回的响应结构不是纯数组，而是包裹在某个外层对象里（比如常见的{ data: [用户列表] }格式）。

我给你一步步拆解解决方案：

1. 先排查API的实际返回结构 #

首先在你的subscribe回调里打印响应结果，确认API到底返回了什么：

refreshUserList(){
  this.userService.getAllUsers().subscribe((res) => {
    console.log("API返回的原始数据:", res); // 关键：看控制台输出的结构
    // this.userService.users = res as User[]; 先注释掉这行
  })
};

打开浏览器开发者工具的Console标签，看输出的res是纯数组，还是带外层属性的对象（比如{ code: 200, data: [...] }）。

2. 修改赋值逻辑匹配API结构 #

如果API返回的是带外层对象的格式（比如{ data: User[] }），你需要提取里面的数组部分再赋值：

// component.ts
refreshUserList(){
  this.userService.getAllUsers().subscribe({
    next: (res) => {
      // 假设API返回的是{ data: [用户数组] }，就取res.data
      this.userService.users = res.data as User[];
      // 如果API确实返回纯数组，就用this.userService.users = res as User[];
    },
    error: (err) => {
      console.error("获取用户列表失败:", err); // 别忘了处理错误情况
    }
  })
};

3. 优化代码避免潜在问题 #

另外有两个小建议让你的代码更健壮：

• 初始化数组：在service里给users初始化为空数组，避免初始状态是undefined导致*ngFor报错：

  // service.ts
  users: User[] = []; // 加个空数组初始化
  

• 组件维护自身数据：建议在组件里单独定义users数组，而不是直接用service的属性，这样组件状态更清晰，也符合Angular的组件化思想：

  // component.ts
  users: User[] = []; // 组件自己的数组
  
  refreshUserList(){
    this.userService.getAllUsers().subscribe((res) => {
      this.users = res.data as User[]; // 赋值给组件的users
      this.userService.users = this.users; // 如果需要同步到service再保留这行
    })
  };
  

  对应的模板也要改成遍历组件的数组：

  <tr *ngFor="let user of users">
    <td>{{ user.fullName }}</td>
  </tr>
  

4. 额外的容错处理 #

如果担心数组加载完成前*ngFor报错，可以用*ngIf先判断数组是否存在：

<table *ngIf="users">
  <tr *ngFor="let user of users">
    <td>{{ user.fullName }}</td>
  </tr>
</table>

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