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>