* ngFor内部* ngFor

Question

我有一个保存用户订单的数组，在它的内部还有另一个保存他的订购商品的数组：

我的问题是：如何遍历他的订单[]-> orderItems []

目前，我只是为了确保其正常工作而手动完成

HTML文件：

 <tbody class="text-center">
                <tr *ngFor = "let order of myOrders;">
                    <td>{{order.orderItems[0].product_Name}}</td>
                    <td>{{order.orderItems[0].product_Price | currency: '$'}}</td>
                    <td>{{order.orderItems[0].product_Quantity}}</td>
                    <td colspan="6">{{order.orderItems[0].product_Price* order.orderItems[0].product_Quantity | currency: '$'}}</td>
                </tr>
                
            </tbody>

TS文件：

export class ProfileOrdersComponent implements OnInit {

  myOrders: OrderDetails[];
  constructor(private userService : UserService) { }

  ngOnInit() {
    this.userService.getProfileOrders().subscribe((data:OrderDetails[]) =>{
      this.myOrders = data
      console.log("My Orders:", this.myOrders);
    })
  }

}

赞赏！

Answer 1

您可以在另一个*ngFor中使用*ngFor。就您而言：

<td colspan="6" *ngFor = "let orderItem of order.OrderItems"> 
   {{orderItem.product_Price* orderItem.product_Quantity | currency: '$'}}
</td>