Angular *ngFor loop - Type 'OrderItem' is not assignable to type 'Iterable<any>'

Question

I have the following 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>

The following .ts file:

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

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

When I run the app I see this in the terminal:

I have tried to 'console.log' the contents of 'order.orderItems' and I see the following array of objects:

The object comes from a MongoDB backend api.

The object models for 'order' and 'orderItem as as follows:

order:

order-item:

why am I getting the error? as you can see 'order.orderItems' is clearly an array of objects, so why is Angular complaining about it not assignable to type 'NgIterable<any>'?

Answer 1

Thanks for the help guys. I changed the 'OrderItem' to orderItem[] as suggested by Tony Marko. Thank you man :-).

Also there was this issue - the OrderItem 'product' property was of type 'string' when it should have been of type 'Product'. I added this to the 'OrderItem' model:-