Angular4购物车异常：点击单个商品+按钮致所有商品数量递增

嘿，我一眼就看出你遇到的问题啦——点击某道菜的"+"按钮，所有菜品的数量都跟着涨，这明显是所有菜品共用了同一个数量变量导致的！别着急，我给你一步步拆解解决方案：

问题根源 #

你大概率在组件类里定义了一个全局的quantity变量，然后所有菜品的数量显示和增减操作都绑定到这个变量上。这样一来，只要这个变量的值变化，所有绑定它的地方都会同步更新，自然就出现了"点一个按钮全涨"的情况。

正确的做法应该是给每个菜品对象添加独立的quantity属性，让每道菜的数量都自己管理自己～

具体修正步骤 #

1. 调整组件类（.ts文件） #

把原来的全局数量变量去掉，给菜品数组里的每个对象加上quantity属性（初始值设为0），同时修改增减方法，让它接收当前菜品作为参数：

// restaurant.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-restaurant',
  templateUrl: './restaurant.component.html',
  styleUrls: ['./restaurant.component.css']
})
export class RestaurantComponent {
  // 给每个菜品添加独立的quantity属性
  dishes = [
    { id: 1, name: '麻婆豆腐', price: 22, quantity: 0 },
    { id: 2, name: '水煮鱼', price: 68, quantity: 0 },
    { id: 3, name: '回锅肉', price: 32, quantity: 0 },
    // 其他菜品按这个格式添加
  ];

  // 增加当前菜品的数量
  increaseQuantity(dish: any) {
    dish.quantity++;
  }

  // 减少当前菜品的数量（防止数量变成负数）
  decreaseQuantity(dish: any) {
    if (dish.quantity > 0) {
      dish.quantity--;
    }
  }
}

2. 修改模板文件（restaurant.component.html） #

在循环渲染菜品时，绑定当前菜品的quantity属性，并且把当前菜品传给增减按钮的点击事件：

<!-- restaurant.component.html -->
<div *ngFor="let dish of dishes" class="dish-card">
  <h4>{{ dish.name }}</h4>
  <p>¥{{ dish.price }}</p>
  <div class="quantity-control">
    <button (click)="decreaseQuantity(dish)" class="btn">-</button>
    <span class="quantity">{{ dish.quantity }}</span>
    <button (click)="increaseQuantity(dish)" class="btn">+</button>
  </div>
</div>

效果说明 #

这样修改后，每道菜的quantity都是独立的属性，点击某道菜的"+"或"-"按钮时，只会修改当前菜品的数量值，其他菜品完全不受影响，完美解决你遇到的同步更新问题～

你提供的问题场景截图：

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