0

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>
4
  • 1
    Creo que el error se encuentra en esta linea this.respComplete = [{$key, type, price, priceAhorro, priceOffert, discount, stock}];, siempre estas creando una arreglo con 1 elemento, deberías intentar con this.respComplete = [...this.respComplete, {$key, type, price, priceAhorro, priceOffert, discount, stock}]; Commented el 13 ene. 2021 a las 19:16
  • @OscarLudick Gracias, eres un encanto.. funciona bien implementando tu respuesta, pero me trae un nuevo problema... como la data se cambia en tiempo real, cuando se actualiza un dato en ella, ya no me llega un array con con tres productos a la vista: resp Array [ {…}, {…}, {…} ] sino que me llegan duplicados.. osea 6 veces. así: resp Array [ {…}, {…}, {…} , {…}, {…}, {…}] que puedo hacer?
    – Fran-Love
    Commented el 13 ene. 2021 a las 19:37
  • 1
    Tienes que limpiar tu arreglo this.respComplete = []; cada vez que hay una actualización, de lo contrario estarás concatenando tus nuevos resultados con los anteriores. Commented el 13 ene. 2021 a las 19:47
  • @OscarLudick. Muchisimas gracias.!! toda la razón.. después de la respuesta del this.offerCarrusel$.subscribe incluí la condición if(resp){ this.respComplete = [];} y todo funciona perfecto. No imaginas como te agradezco tu ayuda <3 Gracias.!
    – Fran-Love
    Commented el 13 ene. 2021 a las 20:04

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.