Render Nested objects value in html using Angular ngFor directive

I have an Object with nested object. I am trying to display in html using ngFor directive of Angular. But I got the result as multiple time. Below my object

productlists = [
{
productname: 'orange', price:
[{ small: 20 }, { medium: 30 }, { large: 40 }], gst: 12
},
{
productname: 'lemon', price:
[{ small: 40 }, { medium: 80 }, { large: 102 }], gst: 20
},
{
productname: 'apple', price:
[{ small: 40 }, { medium: 80 }, { large: 102 }], gst: 20
}

];


The html code is

<div style="margin-left: 20rem;">
<div *ngFor="let product of productlists" >

<p style="color: blue;">Product Name {{product.productname}}</p>

<div *ngFor="let productprice of product.price">
Product Price
<p>Small: {{productprice.small}}</p>
<p>Medium: {{productprice.medium}}</p>
<p>Large: {{productprice.large}}</p>
</div>
<p>Product GST {{product.gst}}</p>

</div>
</div>


The result i got is

Please help me display correctly

Continue reading...