Ionic 2中如何禁用动态列表内被点击的按钮

这是个很常见的小问题，核心原因是你用了一个全局的布尔变量来控制所有按钮的禁用状态——点击后这个变量变为true，所有绑定它的按钮自然都会跟着被禁用。咱们只需要给每个产品单独维护一个禁用状态就行，具体修改步骤如下：

1. 调整TypeScript代码：为每个产品添加独立的禁用状态 #

首先移除全局的disable变量，转而给每个product对象添加一个专属的isDisabled属性，初始值设为false：

情况1：如果产品数据来自接口/异步请求 #

在获取到产品数据后，遍历给每个产品追加属性：

// 假设你通过服务获取产品数据的示例代码
this.productService.getProducts().subscribe(products => {
  this.products = products.map(product => ({
    ...product,
    isDisabled: false // 给每个产品添加独立的禁用状态
  }));
});

情况2：如果是本地静态产品数据 #

直接在每个产品对象中添加isDisabled: false：

products = [
  { name: "产品1", id: 1, price: 10, quantity: 1, images: [{src: "xxx"}], isDisabled: false },
  // 其他产品同理添加isDisabled属性
];

然后修改addlist方法，接收当前点击的product作为参数，只修改该产品的禁用状态：

addlist(product: any, name: string, id: number, price: number, qty: number, image: string) {
  // 这里保留你原来的添加逻辑（比如加入购物车等）
  // ...

  // 仅禁用当前点击的产品对应的按钮
  product.isDisabled = true;
}

2. 修改HTML模板：绑定到产品自身的禁用状态 #

把按钮的[disabled]属性从全局变量改为当前product的isDisabled，同时在点击事件中传入当前产品对象：

<ion-card *ngFor="let product of products" no-padding>
  <ion-item>
    <ion-select [(ngModel)]="qty" *ngIf="product.type==variable" [disabled]="false">
      <ion-option value="1">1kg</ion-option>
      <ion-option value="250">250gm</ion-option>
      <ion-option value="500">500gm</ion-option>
      <ion-option value="100">100gm</ion-option>
    </ion-select>
  </ion-item>
  <button 
    [disabled]="product.isDisabled" 
    color="light" 
    class="addbtn" 
    ion-button clear 
    (click)="addlist(product, product.name, product.id, product.price*product.quantity, product.quantity, product.images[0].src)"
  >
    ADD
  </button>
</ion-card>

原理说明 #

原来的写法中，所有按钮都绑定到同一个全局disable变量，变量值变化会影响所有按钮。现在每个产品都有自己的isDisabled属性，点击某个按钮时只修改对应产品的属性值，其他产品的状态不受影响，这样就实现了点击哪个按钮就只禁用哪个的效果。

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