时间戳

首页 > 解决方案 > 在ionic 2中单击时如何禁用动态列表中存在的按钮

ionic2 - 在ionic 2中单击时如何禁用动态列表中存在的按钮

问题描述

 <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]=disable color="light" class="addbtn" ion-button clear (click)="addlist(product.name,product.id,product.price*product.quantity,product.quantity,product.images[0].src)">ADD</button>
 </ion-card>

这是我的ts

var disable=false;
addlist(name, id, price, qty, image) {
  //it is disabling each button present in the list 
  this.disable=true;
}

标签： ionic2

解决方案

在您的组件中，根据您的要求制作loop并添加products属性：disablecondition

for (let product of products) {
    product.disabled = false;
    if(product.somefield == 'somevalue'){
      product.disabled = true;
    }
}

在 html中取button disabled属性为， [disabled]="product.disabled"

<button [disabled]="product.disabled" color="light" class="addbtn" ion-button clear (click)="addlist(product.name,product.id,product.price*product.quantity,product.quantity,product.images[0].src)">ADD</button>

推荐阅读