Angular как лучше всего обойти вложенный объект

Question

Я пытаюсь пройти по вложенному объекту, показанному ниже, с именем «покупка». У него есть подмассив с именем PurchaseProducts, который содержит подмассив с именем products вместе с некоторыми другими данными.

Как лучше всего пройти через такой тип вложенного объекта?

Я пробовал * ng Для этого

<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 не отображает значения.

Спасибо в adavnce

Answer 1

В вашем 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>

Answer 2

Используйте <div *ngFor="let product of data.purchaseProducts"> вместо <div *ngFor="let product of purchase.purchase">. Это потому, что purchaseProduct является ключом data