使用Angular NGFOR指令在HTML中嵌套对象值

Question

HTML代码是

<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>

我得到的结果是

请帮助我正确显示 我们可以使用

keyvalue

管道将对象的键和值分开，以便我们可以单独访问它们。

我们使用

Answer 1

管道，使从物体中提取的钥匙在首字母大写的情况下显示。

我们使用

*ngIf

的

as

语法来存储从钥匙值管道存储值并使用

ng-container

，以便在HTML中添加额外的元素。

<div style="margin-left: 20px;">
  <div *ngFor="let product of productlists" >
      <p style="color: blue;">Product Name {{product.productname}}</p>
      Product Price
      <div *ngFor="let productprice of product.price">
        <ng-container *ngIf="productprice | keyvalue as productPriceObj">
          <p>{{productPriceObj[0].key | titlecase}}: {{productPriceObj[0].value}}</p>
        </ng-container>
      </div>
      <p>Product GST {{product.gst}}</p>
  </div>
</div>