Angular 12实现商品数量增减功能时单商品加按钮触发全商品计数增加问题

问题根因 #

你当前定义的quantity是组件级的全局变量，页面所有商品条目共用这一个计数变量，修改时自然所有商品的数值都会同步变化。

修复方案 #

第一步：调整TS逻辑，给每个商品单独维护计数 #

这里提供两种实现方式，按需选择即可：

• 方案1：直接在原商品对象上挂载数量属性，代码更简洁

// 删掉原来全局定义的 quantity: number = 0
addtoCart(food: any) {
  // 商品没有数量属性时先初始化再累加
  food.quantity = (food.quantity || 0) + 1;
  console.log(food);
}

removeCart(food: any) {
  if (food.quantity && food.quantity > 0) {
    food.quantity--;
  }
}

• 方案2：用Map存储计数，不修改原商品对象结构

// 用Map存商品唯一ID和对应数量的映射，foodId替换为你实际的商品唯一标识字段
quantityMap = new Map<number, number>();

addtoCart(food: any) {
  const currentCount = this.quantityMap.get(food.foodId) || 0;
  this.quantityMap.set(food.foodId, currentCount + 1);
}

removeCart(food: any) {
  const currentCount = this.quantityMap.get(food.foodId) || 0;
  if (currentCount > 0) {
    this.quantityMap.set(food.foodId, currentCount - 1);
  }
}

第二步：修改HTML模板，绑定对应商品的独立数量 #

如果用方案1，把计数展示部分替换为：

<div class="counter" style="font-size: 2rem">{{food.quantity || 0}}</div>

如果用方案2，替换为：

<div class="counter" style="font-size: 2rem">{{quantityMap.get(food.foodId) || 0}}</div>

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