Angular购物车问题：页面始终显示商品数量为0

首先，你说getQuantity()一直进不了else分支，本质是传给product-card的shopping-cart始终是空的，我梳理了几个代码里的致命问题，按顺序修复就能解决：

1. 最关键的错误：Firebase路径少了斜杠！ #

看你ShoppingCartService里的getCart()方法：

return this.db.object('/shopping-carts' + cartId);

这里的路径写错了！正确的写法应该是在shopping-carts和cartId之间加个斜杠：

return this.db.object('/shopping-carts/' + cartId);

之前的写法会让Firebase去读取一个叫shopping-cartscartId的无效节点，所以valueChanges()返回的永远是null，自然products.component.ts里的cart变量一直没值，传给子组件的shopping-cart也就为空，getQuantity()只能走if分支返回0。

2. 异步数据加载顺序问题 #

你在ProductsComponent里同时加载商品和购物车数据，但两个都是异步操作，可能商品已经渲染了，购物车数据还没回来，导致子组件拿到的shopping-cart还是初始的undefined。

可以用combineLatest来合并两个异步流，确保两者都加载完成后再更新视图：

// 记得先导入combineLatest
import { combineLatest } from 'rxjs';

async ngOnInit(){
  const cart$ = (await this.shoppingCartService.getCart()).valueChanges();
  const products$ = this.productService.getAll();

  this.subscription = combineLatest([cart$, products$]).subscribe(([cart, products]) => {
    this.cart = cart;
    this.products = products;
    // 这里再处理分类过滤，避免商品还没加载就过滤导致空数组
    this.category = this.route.snapshot.queryParamMap.get('category');
    this.filteredProducts = this.category ? this.products.filter(p => p.category === this.category) : this.products;
  });
}

3. 给getQuantity()加一层容错 #

即使shoppingCart有值，也要确保items属性存在，避免出现找不到属性的报错：

getQuantity() {
  if (!this.shoppingCart || !this.shoppingCart.items) {
    console.log("购物车或商品条目未加载: ", this.shoppingCart);
    return 0;
  } 
  const item = this.shoppingCart.items[this.product.key];
  return item ? item.quantity : 0;
}

4. 验证数据存储是否正确 #

修复完路径后，你可以做几个验证：

• 打开浏览器控制台，输入localStorage.getItem('cartId')，看看有没有获取到正确的cartId；
• 去Firebase控制台，检查shopping-carts节点下是否有这个cartId对应的购物车，里面的items是否正确保存了商品的key和数量；
• 确认product.key确实是Firebase中商品节点的key值，不然找不到对应的购物车条目。

按上面的步骤修复后，购物车的数量应该就能正常显示了！

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