时间戳

首页 > 解决方案 > *ngFor 内部 *ngFor

javascript - *ngFor 内部 *ngFor

问题描述

我有一个保存用户订单的数组，其中还有另一个数组保存他的订购项目： 在此处输入图像描述

我的问题是：我如何遍历他的 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);
    })
  }

}

赞赏！

标签： javascriptangularngfor

解决方案

以下是如何呈现 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>

推荐阅读