Skip to main content
se añadió 1 carácter en el cuerpo
Origen Enlace

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

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

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>
se añadieron 3 caracteres en el cuerpo
Origen Enlace

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

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

Este es mi componente.ts

  ngOnInit(): void {
    // Get products array 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>

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

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

Este es mi componente.ts

  ngOnInit(): void {
    // Get products array 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>

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 array 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>
Origen Enlace

Problema al imprimir información de Firebase en Angular 12

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

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

Este es mi componente.ts

  ngOnInit(): void {
    // Get products array 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>