Angular5+Firebase无法更新购物车商品，每次新增重复项

我来帮你排查一下问题所在，你的代码里有两处关键错误导致了当前的问题：

1. getOrCreateCartId 方法逻辑颠倒 #

你当前的代码中，当localStorage里没有cartId时，直接返回了null，这就导致后续获取商品引用时用了无效的cartId，自然拿不到数据（打印item为null），而且新购物车的创建逻辑也没执行。正确的逻辑应该是：如果没有cartId，就创建新购物车并返回其key；如果已有cartId，直接返回它。

2. snapshotChanges() 返回值处理错误 #

angularfire2的snapshotChanges()返回的是包含元数据的Action对象，你需要通过item.payload.val()来获取实际的商品数据，而不是直接访问item.quantity——这会因为找不到属性而得到undefined，进而每次都新增商品。

修正后的完整代码 #

import { Observable } from 'rxjs/Observable'; 
import { Product } from './models/product'; 
import { Injectable } from '@angular/core'; 
import 'rxjs/add/operator/take'; 
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database'; 

@Injectable() 
export class ShoppingCartService { 
  constructor(private db: AngularFireDatabase) { } 

  private create() { 
    return this.db.list('/shopping-carts').push({ dateCreated: new Date().getTime() }); 
  } 

  private getCart(cartId: string) { 
    return this.db.object('/shopping-carts/' + cartId); 
  } 

  private getItem(cartId: string, productId: string) { 
    return this.db.object('/shopping-carts/' + cartId + '/items/' + productId); 
  } 

  private async getOrCreateCartId() { 
    let cartId = localStorage.getItem('cartId'); 
    // 修正逻辑：没有cartId时创建新购物车
    if (!cartId) { 
      const result = await this.create(); 
      cartId = result.key; 
      localStorage.setItem('cartId', cartId); 
    } 
    return cartId; 
  } 

  async addToCart(product: Product) { 
    const cartId = await this.getOrCreateCartId(); 
    console.log(product.key); 
    const itemRef = this.getItem(cartId, product.key); 
    const item$: Observable<any> = itemRef.snapshotChanges(); 

    item$.take(1).subscribe(item => { 
      // 获取实际数据
      const itemData = item.payload.val();
      if (itemData) {
        // 商品已存在，数量+1
        itemRef.update({ quantity: itemData.quantity + 1 });
      } else {
        // 商品不存在，新增
        itemRef.set({ product: product, quantity: 1 });
      }
    }); 
  } 
}

额外说明 #

• 用set()来新增商品，确保第一次添加时正确写入数据；已存在时用update()只更新数量字段，更高效。
• 修正后的getOrCreateCartId保证了始终有有效的购物车ID，不会再出现无效的引用路径。

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