Angular报错Cannot find a differ supporting object求助排查

问题根源 #

*ngFor指令仅支持遍历数组，但你从后端获取的响应res是一个对象（比如后端可能返回了包裹数组的结构，例如{ data: [订单列表] }），直接将整个对象赋值给stored后，*ngFor无法遍历对象，因此抛出该错误。

修复步骤 #

1. 确认后端返回结构：查看控制台打印的res，定位到其中存储订单列表的数组字段（比如res.data、res.orders等）。
2. 调整订阅逻辑：将stored赋值为响应对象中的数组部分，而非整个响应对象。

示例修改（假设数组在res.data字段下，根据实际结构调整）：

ngOnInit(): void {
  window.scrollTo(0, 0)
  this.loggeduser = JSON.parse(localStorage.getItem('user'))
  this.customer_id = this.loggeduser[0].CUSTOMER_ID

  this.http.post('http://localhost:3000/getAdminOrders', 
    JSON.stringify({ 'id': this.customer_id }), 
    { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }
  ).subscribe((res: any) => {
    console.log("res", res)
    // 赋值数组部分而非整个对象
    this.stored = res.data 
    console.log(this.stored)
    // 恢复日期转换逻辑（如果业务需要）
    for (let x = 0; x < this.stored.length; x++) {
      this.stored[x].PURCHASE_DATE = new Date(this.stored[x].PURCHASE_DATE)
    }
  })
}

3. 可选优化：在组件类中提前初始化stored为空数组，避免初始渲染时*ngFor遍历undefined：

// 组件类属性定义
stored: any[] = [];

进阶建议 #

• 为后端响应定义TypeScript接口，提升代码类型安全：

interface Order {
  PRODUCT_IMAGE: string;
  PRODUCT_PURCHASED: string;
  PRODUCT_PRICE: number;
  PURCHASE_DATE: string;
  PURCHASE_TIME: string;
  ORDER_ID: string;
  PAYMENT_MODE: string;
}

interface OrderResponse {
  data: Order[];
}

// 订阅时指定类型
.subscribe((res: OrderResponse) => {
  this.stored = res.data;
})

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