Angular *ngFor 循环 - 类型“OrderItem”不可分配给类型“Iterable<any>”答案

【问题标题】：Angular *ngFor loop - Type 'OrderItem' is not assignable to type 'Iterable<any>'Angular *ngFor 循环 - 类型“OrderItem”不可分配给类型“Iterable<any>”
【发布时间】：2021-09-02 19:18:56
【问题描述】：

我有以下html：

  <div class="grid mb-5" *ngFor="let orderItem of order.orderItems">
    <div class="col-2">{{ orderItem.product.name }}</div>
    <div class="col-2">{{ orderItem.product.brand }}</div>
    <div class="col-2">{{ orderItem.product.category.name }}</div>
    <div class="col-2">{{ orderItem.product.price | currency }}</div>
    <div class="col-2">{{ orderItem.quantity }}</div>
    <div class="col-2">{{ orderItem.product.price * orderItem.quantity | currency }}</div>
  </div>

以下 .ts 文件：

 ngOnInit(): void {
    this._getOrders();
    // console.log(this.orderStatus[order.status].label)
  }

  _getOrders() {
    this.ordersService.getOrders().subscribe((orders) => {
      this.orders = orders;
    });
  }

当我运行应用程序时，我会在终端中看到：

我已尝试“console.log”“order.orderItems”的内容，我看到以下对象数组：

对象来自 MongoDB 后端 api。

'order'和'orderItem的对象模型如下：

订单：

订单项目：

为什么我会收到错误消息？如您所见，'order.orderItems' 显然是一个对象数组，那么为什么 Angular 抱怨它不能分配给类型 'NgIterable'？

【问题讨论】：

您没有与我们分享order 的来源和输入方式。
@user776686 这是一个编译错误，与异步无关。
我在描述中添加了更多细节
您在类中有 orderItems 类型为OrderItem。将其更改为OrderItem[]。

标签： angular ngfor

【解决方案1】：

感谢各位的帮助。按照 Tony Marko 的建议，我将“OrderItem”更改为 orderItem[]。谢谢你 :-)。

还有这个问题 - OrderItem“产品”属性的类型是“字符串”，而它本应是“产品”类型。我将此添加到“OrderItem”模型中：-

【讨论】：