购物车单商品数量增加时其他商品同步增长问题求助

你当前的核心问题是所有商品共用同一个全局quantity变量，导致修改任意商品的数量时，所有商品的显示都会同步变化。另外每次点击都重新请求全部商品数据的操作完全多余，还会覆盖本地的修改状态。

修复步骤： #

1. 给每个商品添加独立的数量属性

从服务获取商品列表后，为每个商品对象添加专属的数量字段（比如qty），默认值设为1：

ngOnInit() {
  this.itemService.getAllItems().subscribe(res => {
    this.itemList = res.map(item => ({
      ...item,
      qty: 1 // 为每个商品初始化独立的数量属性
    }));
  });
}

2. 修改HTML模板，绑定商品自身的数量

把模板里的全局quantity替换为当前商品的qty属性，同时传递对应商品的ID：

<!-- 确保这段代码在*ngFor循环内部，遍历itemList渲染每个商品 -->
<div *ngFor="let item of itemList">
  <p><strong>Price:</strong> ${{item.Cost * item.qty}}</p>
  {{item.qty}}
  <button mat-icon-button (click)="increaseItemQty(item.id)">
    <mat-icon>add_circle</mat-icon>
  </button>
</div>

3. 修正数量增加函数，仅修改目标商品的数量

直接操作本地的itemList找到对应ID的商品，单独修改它的数量，无需重复请求接口：

// 移除全局的quantity变量
increaseItemQty(id: any) {
  const targetItem = this.itemList.find(i => i.id === id);
  if (targetItem) {
    targetItem.qty += 1; // 只增加目标商品的数量
  }
}

额外提示 #

• 尽量避免在点击事件中频繁请求后端数据，除非你需要实时同步后端购物车状态（常规场景下先在本地处理，再统一同步到后端）。
• 给数量字段指定明确的类型（比如number），替换any，避免潜在的类型错误。

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