*ngFor内部*ngFor

Question

我有一个数组，该数组包含一个用户的订单，其中还有另一个数组，它保存着他订购的项目：

​

我的问题是:如何循环遍历他的orders[] -> 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

下面是如何呈现html

​

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

</tbody>

​