Angular报错：NgFor仅支持可迭代对象，无法处理'[object Object]'

问题根源 #

你遇到的报错是因为products被赋值为对象而非数组。观察接口返回的数据结构，真正的商品数组嵌套在data.$values字段中，而你当前把response.data（这是一个包含$id和$values的对象）赋值给了products，NgFor仅支持遍历可迭代的数组，自然无法处理对象。

修复步骤 #

修改app.component.ts中的订阅逻辑，将赋值目标改为response.data.$values：

ngOnInit(): void {
  this.http.get('https://localhost:5001/api/products').subscribe((response: any) => {
    // 改为提取data下的$values数组
    this.products = response.data.$values;
  }, error => {
    console.log(error);
  });
}

进阶优化（可选） #

为了避免any类型带来的潜在问题，建议定义明确的数据类型，让代码更健壮：

// 定义商品数据类型
interface Product {
  id: number;
  name: string;
  shortDescription: string;
  longDescription: string;
  category: string;
  price: number;
  stockLevel: number;
  orderDetails: {
    $id: string;
    $values: [];
  }
}

// 定义接口响应类型
interface ProductApiResponse {
  $id: string;
  data: {
    $id: string;
    $values: Product[];
  };
  error: null | string;
}

// 在请求中指定类型
ngOnInit(): void {
  this.http.get<ProductApiResponse>('https://localhost:5001/api/products').subscribe((response) => {
    this.products = response.data.$values;
  }, error => {
    console.log(error);
  });
}

添加类型定义后，TypeScript会自动做属性校验，避免后续出现拼写错误等低级问题。

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