Quiero mostrar los datos desde mi backend hasta el front-end. Está funcionando, pero estoy creando un sistema de carrito de compras en Angular con la ayuda de un video de YouTube. Tengo poco conocimiento de Observables y cosas relacionadas con él. Para el Youtuber, se muestran los datos. La única diferencia entre el proyecto de YouTube y el mío es que él usa una API de tienda falsa y yo uso una base de datos y obtengo productos del backend.
Mi archivo cart.component.ts
import { Component, OnInit } from '@angular/core'; import { CartService } from 'src/services/cart.service'; @Component({ selector: 'app-cart', templateUrl: './cart.component.html', styleUrls: ['./cart.component.css'] }) export class CartComponent implements OnInit { products: any = []; allProducts: any = 0; constructor(private cartService: CartService) { } ngOnInit(): void { this.cartService.getProductData().subscribe(res => { this.products = res; this.allProducts = this.cartService.getTotalAmount(); }) } removeProduct(item: any) { this.cartService.removeCartData(item); } removeAllProducts() { this.cartService.removeAllCart(); } }Mi archivo cart.service.ts
import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class CartService { cartDataList: any = []; productList = new BehaviorSubject<any>([]); constructor() { } // Get cart data getProductData() { return this.productList.asObservable(); } // Set cart data setProduct(product: any) { this.cartDataList.push(...product); this.productList.next(product); } // Add products to cart addToCart(product: any) { this.cartDataList.push(product); this.productList.next(this.cartDataList); this.getTotalAmount(); console.log(this.cartDataList); } // Calculate total amount getTotalAmount() { let grandTotal = 0; this.cartDataList.map((a: any) => { grandTotal += a.total; }); } // Remove product one by one removeCartData(product: any) { this.cartDataList.map((a: any, index: any) => { if (product.id === a.id) { this.cartDataList.splice(index, 1); } }) } // Empties the whole cart removeAllCart() { this.cartDataList = []; this.productList.next(this.cartDataList); } }Sé que el problema está en la función getProductData() pero no sé cómo solucionarlo. Además, si necesita algún otro archivo que pueda ayudar, no dude en preguntar y sí, esta es mi primera publicación con una pregunta.
listaProductos = new BehaviorSubject([]); getProductData$ = this.productList.asObservable();
no use this.productList.asObservable() en una función, declárelo como una variable.