Angular遍历嵌套对象的最佳方式是什么

Question

我正在尝试遍历下面显示的名为 purchase 的嵌套对象。它有一个名为 purchaseProducts 的子数组，其中包含名为 products 的子数组以及一些其他数据。

遍历此类嵌套对象的最佳方法是什么？

我试过这样的 *ngFor

<div *ngFor = "let data of purchase "> 
        {{data.date | slice: 0:10}}
        {{data.totalprice}}

    <div *ngFor="let product of purchase.purchaseProducts">

          {{product.id}} // not working
          {{product.quantity}} //not working
          {{product.price}}
          {{product.products.name}}
    </div>
</div>

但内部 div 不显示值。

谢谢你的到来

Answer 1

使用 <div *ngFor="let product of data.purchaseProducts"> 而不是 <div *ngFor="let product of purchase.purchase">。这是因为 purchaseProduct 是 data

的一个键

Answer 2

你的json里没有purchase_product，我觉得你应该用data.purchaseProducts:

<div *ngFor = "let data of purchase "> 
        {{data.date | slice: 0:10}}
        {{data.totalprice}}

    <div *ngFor="let product of data.purchaseProducts">

          {{product.id}} // not working
          {{product.quantity}} //not working
          {{product.price}}
          {{product.products.name}}
    </div>
</div>

Angular遍历嵌套对象的最佳方式是什么

Angular what is the best way to traverse the nested object

javascript

typescript

angular

angular9