Início / coding / Perguntas / 79438995
Accepted
Reegan
Asked: 2025-02-14 18:01:36 +0800 CST

Renderizar valor de objetos aninhados em HTML usando a diretiva Angular ngFor

  • 772

Eu tenho um objeto com objeto aninhado. Estou tentando exibir em html usando a diretiva ngFor do Angular. Mas obtive o resultado como várias vezes. Abaixo do meu objeto

 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
    }

];

O código 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>

O resultado que obtive foi insira a descrição da imagem aqui

Por favor me ajude a exibir corretamente

html

1 respostas

  1. Best Answer

    Podemos usar keyvaluepipe para dividir a chave e o valor do objeto para que possamos acessá-los individualmente.

    Usamos titlecasepipe para que a chave extraída do objeto seja exibida com a primeira letra maiúscula.

    Usamos *ngIfa assintaxe para armazenar o valor do pipe keyvalue e usá-lo ng-containerpara que nenhum elemento extra seja adicionado ao 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>

    Código completo:

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

    Demonstração do Stackblitz

    • 1

relate perguntas