Angular购物车无法正常展示后端商品数据如何解决？

你的代码存在4处逻辑错误，和getProductData()方法本身无关：

• 后端返回的商品数据未接入RxJS数据流：BehaviorSubject需要主动调用next()推送新值才会通知所有订阅者，你仅在购物车组件订阅了数据流，但从自有后端拉取到商品数据后，从未调用服务方法将数据推入数据流，订阅者拿到的始终是初始空数组。
• setProduct逻辑错误：原方法往cartDataListpush数据后，推送的是入参的product数组，而非更新后的完整购物车列表，会导致数据不一致。
• getTotalAmount无返回值也未同步更新状态：原方法仅在内部计算总价，既没有return计算结果，也没有将总价推送给订阅者，组件无法获取实时正确的总价。
• 删除商品逻辑存在缺陷：原removeCartData用map遍历数组同时执行splice删除，容易因数组长度变化导致漏删，且删除后未推送新的购物车列表到数据流，页面不会同步更新。

1. 对接后端数据时主动推入购物车数据流 #

在你调用自有后端接口拉取商品数据的位置（一般是商品列表页组件、商品初始化逻辑处），拿到后端返回结果后调用setProduct完成数据初始化，示例代码：

// 该段代码写在你拉取后端商品数据的业务位置，比如商品列表组件的ngOnInit中
this.http.get('你的自有后端商品接口地址').subscribe((backendProducts: any) => {
  // 提前映射字段，保证每个商品有唯一id、单价、初始数量、单类商品小计，匹配购物车逻辑
  const formatProducts = backendProducts.map(item => ({
    ...item,
    quantity: 1,
    total: item.price
  }))
  this.cartService.setProduct(formatProducts)
})

2. 修复CartService的逻辑错误 #

修正后的cart.service.ts代码如下：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CartService {
  cartDataList: any = [];
  productList = new BehaviorSubject<any>([]);
  private grandTotal = new BehaviorSubject<number>(0);

  constructor() { }
  // 获取购物车商品数据流
  getProductData() {
    return this.productList.asObservable();
  }

  // 初始化购物车数据
  setProduct(products: any) {
    this.cartDataList = [...products];
    this.productList.next(this.cartDataList);
    this.getTotalAmount();
  }

  // 添加商品到购物车
  addToCart(product: any) {
    // 先判断商品是否已存在，避免重复添加
    const existItem = this.cartDataList.find((item:any) => item.id === product.id);
    if (existItem) {
      existItem.quantity += 1;
      existItem.total = existItem.price * existItem.quantity;
    } else {
      this.cartDataList.push({...product, quantity: 1, total: product.price});
    }
    this.productList.next(this.cartDataList);
    this.getTotalAmount();
  }

  // 计算总价
  getTotalAmount() {
    let total = 0;
    this.cartDataList.forEach((item:any) => {
      total += item.total;
    });
    this.grandTotal.next(total);
    return total;
  }

  // 获取总价数据流
  getTotal() {
    return this.grandTotal.asObservable();
  }

  // 删除单个商品
  removeCartData(product: any) {
    // 用filter替代map+splice，避免遍历中修改数组长度导致的漏删问题
    this.cartDataList = this.cartDataList.filter((item:any) => item.id !== product.id);
    this.productList.next(this.cartDataList);
    this.getTotalAmount();
  }

  // 清空购物车
  removeAllCart() {
    this.cartDataList = [];
    this.productList.next(this.cartDataList);
    this.getTotalAmount();
  }
}

3. 调整购物车组件订阅逻辑 #

修正后的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: number = 0;

  constructor(private cartService: CartService) { }

  ngOnInit(): void {
    // 单独订阅商品列表和总价，数据变更时自动更新视图
    this.cartService.getProductData().subscribe(res => {
      this.products = res;
    })
    this.cartService.getTotal().subscribe(total => {
      this.allProducts = total;
    })
  }

  removeProduct(item: any) {
    this.cartService.removeCartData(item);
  }

  removeAllProducts() {
    this.cartService.removeAllCart();
  }
}

注意：如果你的自有后端返回的商品字段没有id、price等购物车逻辑依赖的字段，需要先做字段映射，保证字段名和逻辑匹配，否则计算、增删功能会异常。

内容的提问来源于stack exchange，提问作者ThunderJaw