Estoy trabajando con angular 10. Mi problema es que debo recibir un array con 3 productos en la vista. Pero actualmente solo recibo 1 producto.
Este array es un Observable y no se que estoy haciendo mal para que no me resulte. Si pueden ayudarme por favor se los agradecería mucho. les dejo mi código.
En el servicio estoy trabajando con firebase realtime database
SERVICIO:
import { Productos } from './../interfaces/productos';
private pruebaDB: AngularFireList<Productos>;
constructor(private db: AngularFireDatabase) {
this.pruebaDB = this.db.list('productos');
}
getData(): Observable<Productos[]> {
return this.pruebaDB.snapshotChanges().pipe(
map((changes) => {
return changes.map((c) => ({
$key: c.payload.key,
...c.payload.val()
}));
})
);
}
Preparo la interfas para mi observable INTERFACES: (Con el que recibo el nuevo array)
export interface Carrusel {
$key?: string;
type: string;
discount: string;
price: number;
priceAhorro: number;
priceOffert: number;
stock: number;
}
TYPESCRIPT:
import { Component, OnInit } from '@angular/core';
import { ProductosService } from '../../../services/productos.service';
import { Productos } from '../../../interfaces/productos';
import { Carrusel } from '../../../interfaces/carrusel';
import { Observable } from 'rxjs';
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
export class HomeHotTodayComponent implements OnInit {
public offerCarrusel$: Observable<Carrusel[]> = of([]);
price: number = 0;
priceAhorro: number = 0;
priceOffert: number = 0;
respComplete: any[] = [];
constructor(private productosService:ProductosService) { }
ngOnInit(): void {
this.productosService.getDataCarrusel().pipe(
map((resp: Productos[]) => resp.map( ({$key, discount, price, stock, type}) => ({$key, discount, price, stock, type}) ))
).subscribe(resp => {
if(resp){
resp.forEach(resp =>{
if(resp.type == "Descuento"){
this.price = Number(resp.price);
this.priceAhorro = Number(resp.price) * Number(resp.discount/100);
this.priceOffert = Number(resp.price) - Number(resp.price * resp.discount/100);
}
if(resp.type == "Fijo"){
this.price = Number(resp.price);
this.priceAhorro = Number(resp.discount);
this.priceOffert = Number(resp.price) - Number(resp.discount);
}
let $key = resp.$key; //valor llega de la base de datos
let type = resp.type; //valor llega de la base de datos
let price = this.price; //valor llega de la base de datos
let priceAhorro = this.priceAhorro //valor nuevo para agregar
let priceOffert = this.priceOffert //valor nuevo para agregar
let discount = resp.discount; //valor llega de la base de datos
let stock = resp.stock; //valor llega de la base de datos
this.respComplete = [{$key, type, price, priceAhorro, priceOffert, discount, stock}];
});
this.offerCarrusel$ = of(respComplete);
this.offerCarrusel$.subscribe(resp => {
// Solo recibo un array con 1 producto en la vista
console.log('resp', resp) //resp Array [ {…} ]
//PERO DEBERIA SER UN ARRAY DE 3 PRODCUTOS EN LA VISTA, CON LA RESPUESTA
//resp Array [ {…}, {…}, {…} ]
});
}
});
}
}
me gustaria ver si existe otra forma de incluir los datos de priceAhorro, priceOffert al nuevo array sin hacer un recorrido.. talves usando map, pero no se como.
HTML:
<div
*ngFor="let offer of offerCarrusel$ | async"
class="ps-banner">
<div class="banner">
<h4>{{offer.$key}}</h4>
<h4>{{offer.type}}</h4>
<h3>{{offer.discount}} <br/>
{{offer.priceAhorro}} <br/>
<p>{{offer.priceOffert}} <strong> {{offer.price}}</strong></p>
</h3>
<h3>{{offer.stock}}</h3>
</div>
</div>
this.respComplete = [{$key, type, price, priceAhorro, priceOffert, discount, stock}];
, siempre estas creando una arreglo con 1 elemento, deberías intentar conthis.respComplete = [...this.respComplete, {$key, type, price, priceAhorro, priceOffert, discount, stock}];
this.respComplete = [];
cada vez que hay una actualización, de lo contrario estarás concatenando tus nuevos resultados con los anteriores.