Angular报错TS2322: Product类型无法分配给NgIterable类型问题求助

• 类型声明错误：*ngFor指令仅支持遍历NgIterable类型（如数组、类数组结构），你的组件中productList被声明为单个Product类型，不符合遍历要求，直接触发类型不匹配的TS2322错误。
• 赋值逻辑错误：订阅接口返回的回调中，你写的是data.productList = data，不仅赋值方向写反，也没有指向组件实例的productList属性，就算类型正确也无法拿到渲染所需的数据。

1. 修正productList的类型声明，改为Product数组类型并初始化空数组，避免初始值为空的异常：
   将组件中原productList : Product;替换为：

productList: Product[] = [];

2. 修正订阅回调的赋值逻辑，将接口返回的商品列表赋值给组件的productList属性：
   如果你的viewProduct()接口直接返回商品数组，修改为：

ngOnInit(): void {
  this.productService.viewProduct().subscribe(data => {
    this.productList = data;
  })
}

如果接口返回的是包含productList字段的包装对象，修改为：

ngOnInit(): void {
  this.productService.viewProduct().subscribe(data => {
    this.productList = data.productList;
  })
}

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