Angular购物车中Array.push致对象属性同步变更问题求助

兄弟，你猜的完全没错！这个问题就是典型的对象引用共享搞的鬼：

当你从商品列表里拿到Plu对象，修改它的变体后添加到购物车，第二次操作同一个商品时，其实还是在操作内存里的同一个对象引用——所以两次添加到购物车的是同一个对象，后面修改变体自然会把之前已经加入购物车的条目也给改了。而刷新页面后，前端会重新从数据源拉取商品数据，生成全新的对象引用，这时候两次添加的就是完全独立的对象，自然不会互相影响了。

具体解决方案 #

要搞定这个问题，核心思路就是：把要添加到购物车的商品对象做深拷贝，让每个购物车条目都是独立的实例，互不干扰。下面给你几个实用的实现方式：

方式1：自己写个深拷贝工具函数（通用靠谱） #

如果你的Plu和Varianti对象结构不算特别复杂，可以自己实现一个深拷贝函数，能处理大部分常规类型：

private deepCopy<T>(obj: T): T {
  // 基本类型直接返回
  if (obj === null || typeof obj !== 'object') return obj;
  // 处理Date对象
  if (obj instanceof Date) return new Date(obj.getTime()) as unknown as T;
  // 处理数组
  if (obj instanceof Array) return obj.map(item => this.deepCopy(item)) as unknown as T;
  // 处理普通对象
  const copiedObj = {} as T;
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copiedObj[key] = this.deepCopy(obj[key]);
    }
  }
  return copiedObj;
}

然后修改你的cart.service里的addToCart方法，添加前先拷贝：

addToCart(product: Plu): void {
  // 深拷贝原商品，彻底切断引用
  const copiedProduct = this.deepCopy(product);
  copiedProduct.qta = 1;
  this.carrello.plu.push(copiedProduct);
}

方式2：用JSON序列化快速拷贝（简单但有局限） #

如果你的商品对象里没有函数、Date这类特殊类型，用JSON的方法最省事：

addToCart(product: Plu): void {
  // 序列化再反序列化，生成全新对象
  const copiedProduct = JSON.parse(JSON.stringify(product)) as Plu;
  copiedProduct.qta = 1;
  this.carrello.plu.push(copiedProduct);
}

⚠️ 注意：这个方法会把Date对象转成字符串，函数会直接丢失，如果你的Plu或Varianti里有这类属性，别用这个方法！

方式3：给Plu类加个clone方法（适合自定义类场景） #

如果Plu是你自己定义的类，可以在类里写一个复制方法，手动复制所有属性（包括变体数组）：

export class Plu {
  id: number;
  varianti: Varianti[];
  qta?: number;
  // 其他属性...

  // 实现克隆方法
  clone(): Plu {
    const clonedPlu = new Plu();
    clonedPlu.id = this.id;
    // 变体数组也要逐个拷贝，不然还是共享引用
    clonedPlu.varianti = this.varianti.map(v => {
      const clonedVar = new Varianti();
      clonedVar.id = v.id;
      clonedVar.stato = v.stato;
      // 复制变体的其他属性
      return clonedVar;
    });
    // 复制Plu的其他属性
    return clonedPlu;
  }
}

然后在添加购物车时调用这个方法：

addToCart(product: Plu): void {
  const copiedProduct = product.clone();
  copiedProduct.qta = 1;
  this.carrello.plu.push(copiedProduct);
}

额外小建议 #

• 推荐在添加到购物车的时机做拷贝，而不是在修改变体的时候，这样能保证商品列表里的原对象不会被意外修改，同时购物车的每个条目都是独立的。
• 后续可以优化购物车逻辑：如果添加的是同ID且变体完全相同的商品，直接增加数量而不是添加新条目，这样购物车体验会更好~

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