*ngFor 内部 *ngFor答案

【问题标题】：*ngFor inside *ngFor*ngFor 内部 *ngFor
【发布时间】：2020-05-17 10:41:38
【问题描述】：

我有一个保存用户订单的数组，其中还有另一个数组保存他的订购商品：

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

}

赞赏！

【问题讨论】：

再次使用*ngfor，有什么问题？？
您可以查看此示例，了解嵌套 *ngFor 角度 stackblitz.com/edit/angular-nested-ngfor-in-table-bn1psu

标签： javascript angular ngfor

【解决方案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>

【讨论】：