Angular购物车移除按钮失效，单商品数量更新异常求助

问题根源 #

1. 按钮传参错误：HTML中点击事件传递的productInfo是组件的@Input属性，但该属性并未在当前组件中正确赋值，导致方法接收不到目标商品数据。
2. 参数类型不匹配：removeFromCart方法接收的参数类型是Product，但实际需要处理的是products数组中的元素（结构为{product: Product, quantity: number}），直接操作product.quantity会因类型不匹配失效。
3. 未同步更新购物车服务：修改本地products数组后，未将变更同步到ProductService，导致购物车状态未持久化，视图更新也不及时。

修复步骤 #

1. 修正HTML按钮传参 #

将按钮的点击事件参数从productInfo改为循环中的当前product项：

<td><button class="btn btn-outline-success" (click)="removeFromCart(product)">Remove from Cart</button></td>

2. 调整TypeScript方法逻辑 #

更新removeFromCart方法，修正参数类型，精准处理单商品数量减少，并同步更新购物车服务：

// 定义购物车项类型，增强类型安全
type CartItem = {
  product: Product;
  quantity: number;
};

// 修改移除方法
removeFromCart(item: CartItem): void {
  // 精准定位目标商品项
  const targetIndex = this.products.findIndex(p => p.product.id === item.product.id);
  if (targetIndex === -1) return;

  // 当前商品数量减1
  this.products[targetIndex].quantity--;

  // 数量为0时移除该项
  if (this.products[targetIndex].quantity < 1) {
    this.products.splice(targetIndex, 1);
  }

  // 重新计算购物车总价
  this.totalPrice = this.products.reduce((total, cartItem) => {
    return total + cartItem.product.price * cartItem.quantity;
  }, 0);

  // 同步更新购物车服务，持久化状态
  this.productService.setCart({
    cartCount: this.products.reduce((count, cartItem) => count + cartItem.quantity, 0),
    products: [...this.products], // 浅拷贝避免引用问题
    totalPrice: this.totalPrice
  });
}

3. 清理无用代码 #

组件中未被正确使用的@Input() productInfo!: Product;属性可直接删除，避免代码混淆。

额外说明 #

• 原注释的forEach循环会批量修改所有商品数量，是因为缺少目标商品的条件判断；修复后的方法通过findIndex精准定位目标项，仅处理当前点击的商品。
• 修改数组时通过splice直接操作原数组，再同步到服务，确保Angular变更检测能触发视图更新。

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