1

Estoy desarrollando una app la cual me regresa un objeto desde la Realtime Database de Firebase y estoy usando Typescript para capturar estos datos.

Este es mi servicio.ts

  getAllProducts(){
    return this.httpClient.get('https://mypage.com/Adfgc8I1dZp3qufo3KopfGf/Products.json');
  }

Este es mi componente.ts

  ngOnInit(): void {
    // Get products Object from service
    this.serviceMerchants.getAllProducts()
    .subscribe(
      (products: Product[] | any) => {
        this.products = products;
      },
      error => {
        //console.log(error);
      }
    )
  }

Al obtener el objeto e imprimirlo en consola me muestra algo asi

{"AsdmaUasdwpAM": {...} },  
{"As1s45dw23pAM": {...} },  
{"241256asa2pAM": {...} },  

Quiero imprimir en el html los datos dentro del objeto, pero solamente puedo acceder a la product.key y mas no a los datos almacenados dentro del valor de esa llave.

Ejemplo html

<div *ngFor="let product of products | keyvalue">
    <p>{{product.key}}</p> // Funciona
    <p>{{product.Nombre}}</p> // No funciona
    <p>{{product.Descripcion}}</p> // No funciona
</div>

1 respuesta 1

0

Encontre la solucion, la dejo aqui por si alguien en un futuro tiene el mismo problema.

En nuestro componente, al recibir la informacion se debe de parsear el Object a Array mediante Object.values() para poder acceder a ella desde el html

  ngOnInit(): void {
    this.serviceMerchants.getAllProducts()
    .subscribe(
      (products: Product[] | any) => {
        this.products = Object.values(products); // Aqui la solucion
        this.refreshProducts();
      }
    )
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.