Angular4 ngFor报错：无法找到支持'[object Object]'的差异器

嘿，这个报错我太熟了！咱们一步步来拆解：

报错原因 #

NgFor only supports binding to Iterables such as Arrays 这句话已经说得很直白：*ngFor 指令只能用来遍历数组、Set、Map这类可迭代集合，而你现在传给它的是一个普通的JavaScript对象（[object Object]），自然会触发这个报错。

排查与解决方案 #

1. 先确认API返回的数据结构

首先得搞清楚后端到底给了你什么数据。在组件的API订阅回调里加个console.log，打印一下拿到的响应：

// 你的API调用代码示例
this.http.get('/api/your-endpoint').subscribe(response => {
  console.log('API返回数据：', response); // 打开浏览器控制台看输出
  // 原来的赋值可能有问题
  this.yourData = response; 
});

常见的情况是后端返回的是一个包裹着数组的对象，比如：

{
  "code": 200,
  "data": [{"id":1, "name":"看板1"}, {"id":2, "name":"看板2"}]
}

这时候你直接把整个response赋值给模板变量，就等于给*ngFor传了一个对象，肯定报错。

2. 调整数据赋值逻辑

如果是上面的嵌套结构，你需要把对象里的数组部分取出来赋值：

this.http.get('/api/your-endpoint').subscribe(response => {
  // 把response里的data数组拿出来
  this.yourData = response.data; 
});

这样模板里的*ngFor="let item of yourData"就可以正常遍历数组了。

3. 如果确实需要遍历对象的属性

要是后端返回的就是单个对象，但你想展示它的所有键值对，可以用Object.entries()把对象转换成可迭代的数组：

• 组件里处理：

this.http.get('/api/single-board').subscribe(response => {
  // 把对象转成[key, value]格式的数组
  this.boardProps = Object.entries(response);
});

• 模板里使用：

<div *ngFor="let [key, value] of boardProps">
  <span>{{ key }}:</span>
  <span>{{ value }}</span>
</div>

4. 额外：处理异步加载的空值问题

为了避免组件初始化时数据还没加载完成导致的报错，建议在模板里加个*ngIf判断：

<div *ngIf="yourData">
  <div *ngFor="let item of yourData">
    {{ item.name }}
  </div>
</div>

或者用安全导航操作符?.简化：

<div *ngFor="let item of yourData?.data">
  {{ item.name }}
</div>

总结 #

核心问题就是你给*ngFor传了非可迭代的对象，先通过控制台确认API返回的结构，再调整赋值逻辑，把数组传给*ngFor就搞定啦！

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