Angular项目使用*ngFor遍历数据时报Cannot find a differ supporting object错误如何解决

报错根因 #

Cannot find a differ supporting object '[object Object]' 报错的核心逻辑是Angular的*ngFor指令仅支持绑定数组等可迭代（Iterable）类型，你当前代码中*ngFor遍历的piatti实际为对象类型，不符合遍历要求。

虽然你在http.get方法中声明了返回泛型为Piatto[]，但TypeScript泛型仅做编译时的类型提示，不会修改运行时的实际返回值：你请求的db.json返回的外层结构并非直接的数组，大概率是外层包裹了一层业务对象，比如常见的{"code":200,"data": [数组内容]}、{"piatti": [数组内容]}这类格式，你直接将整个返回对象赋值给了数组类型的piatti变量，运行时遍历对象就会触发该报错。

解决方案 #

• 首先确认接口返回的实际数据结构，在订阅回调中添加打印语句，打开浏览器控制台查看返回内容，再根据实际结构取到对应的数组字段赋值：

ngOnInit() {
    this.servizioPiatti.get().subscribe((osserva)=>{
      console.log('接口返回值：', osserva)
      // 示例：如果打印出来的结构是 { data: [....] }，就取data字段赋值
      this.piatti = osserva.data
    })
}

• 额外增加渲染安全校验，避免接口请求完成前piatti为undefined引发的二次报错，修改HTML模板：

<tr *ngFor="let piatto of piatti || []">
    <td>{{piatto.id}}</td><td>{{piatto.titolo}}</td>
</tr>

如果需要进一步简化代码，也可以使用Angular的async管道自动处理订阅和销毁逻辑，无需手动调用subscribe。

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