代码之家 › 专栏 › 技术社区 › Reegan

使用Angular ngFor指令在html中渲染嵌套对象值

ngfor nested object angular html

Reegan · 技术社区 · 2 月前

我有一个嵌套对象的对象。我试图使用Angular的ngFor指令在html中显示。但我多次得到了这个结果。在我的对象下方

 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
    }

];

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>

我得到的结果是

请帮我正确显示

1 回复 | 直到 2 月前

Naren Murali 2 月前

我们可以使用 keyvalue 管道分割对象的键和值,以便我们可以单独访问它们。

我们使用 titlecase 管道,以便从对象中提取的密钥以首字母大写的方式显示。

我们使用 *ngIf s 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>

完整代码:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
@Component({
  selector: 'app-root',
  imports: [CommonModule],
  template: `
    <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>
  `,
})
export class App {
  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,
    },
  ];
}

bootstrapApplication(App);

使用Angular ngFor指令在html中渲染嵌套对象值

完整代码:

Stackblitz Demo