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

在组件中，根据所需的

条件对
产品
进行
循环
，并添加
禁用
属性：

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

在html中将
按钮禁用
属性设置为，
[disabled]=“product.disabled”

添加
错误在于，您对数组中的每个项目都使用了相同的
disable
属性，因此需要对数组中的每个项目使用特定的
disable

我认为有两种方法可以做到这一点：


您可以遍历
产品
并添加
禁用
属性。如果它来自服务器，并且如果您可以并且想要，您可以在那里添加属性，这样您就不会在前端浪费一点时间
您可以创建一个新的
disable
数组，并使用*ngFor索引访问每个项目的正确disable

第一个选项类似于：
在.ts文件中，您将有：

<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>

我可以直接在响应上使用map，或者使用spread操作符，但让我们着眼于最简单的方法

在html中：

// Let's say you're fetching your products in a lifecyclehook like ionViewDidLoad
ionViewDidLoad = () => {
  // your call for the api...
  myHttpCall.then(prods => {
    this.products = prods;
    // let's use map to iterate through the products
    this.products.map(item => {
      // this'll create a property in every item of your array.
      item.disabled = false;
    })
  })
}

addlist(name, id, price, qty, image, product) {
  // you'll need to pass the entire object to your method, and then set the property to true.
  product.disabled = true;
}

export class YourPage {
  // the new boolean array
  public disabled: Array<boolean> = [];

  // The method where you get the products, same as the first option
  ionViewDidLoad = () => {
    // your call for the api...
    myHttpCall.then(prods => {
      this.products = prods;
      // use a for to iterate through
      for (let i =  0; i < this.products.length; i++){
        this.disabled.push(false);
      }
    })
  }

  addlist(name, id, price, qty, image, index) {
    // now you'll pass the index from the ngfor
    // you'll access the corresponding disable from the array and set to true
    this.disabled[index] = true;
  }
}


添加

第二种选择：
在.ts中，您将创建一个新数组，并为产品中的每个项目推送一个新布尔值：

<!-- All your card code. Change the disabled of the button and the select as bellow -->
<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, product)">ADD</button>
<!-- Just pass the entire product in the end of the method -->

导出类页面{
//新的布尔数组
公共禁用：数组=[]；
//获取产品的方法，与第一个选项相同
ionViewDidLoad=（）=>{
//您对api的调用。。。
myHttpCall.then（prods=>{
本产品=产品；
//使用for进行迭代
for（设i=0；i

然后在html中：

// Let's say you're fetching your products in a lifecyclehook like ionViewDidLoad
ionViewDidLoad = () => {
  // your call for the api...
  myHttpCall.then(prods => {
    this.products = prods;
    // let's use map to iterate through the products
    this.products.map(item => {
      // this'll create a property in every item of your array.
      item.disabled = false;
    })
  })
}

addlist(name, id, price, qty, image, product) {
  // you'll need to pass the entire object to your method, and then set the property to true.
  product.disabled = true;
}

export class YourPage {
  // the new boolean array
  public disabled: Array<boolean> = [];

  // The method where you get the products, same as the first option
  ionViewDidLoad = () => {
    // your call for the api...
    myHttpCall.then(prods => {
      this.products = prods;
      // use a for to iterate through
      for (let i =  0; i < this.products.length; i++){
        this.disabled.push(false);
      }
    })
  }

  addlist(name, id, price, qty, image, index) {
    // now you'll pass the index from the ngfor
    // you'll access the corresponding disable from the array and set to true
    this.disabled[index] = true;
  }
}


1公斤
250克
500克
100克
添加

希望这有帮助：D
在哪种情况下你想禁用它？谢谢，但我没有任何值来满足这个条件，就像我单击了一次按钮，它就可以了disabled@kritisharma很高兴它奏效了，所以请接受我正确的答案，它可以帮助其他人找到这个解决方案。你肯定：）@GabrielBarreto
<!-- declare the index in your ngFor -->
<ion-card *ngFor="let product of products; let i = index" no-padding>
   <ion-item>
      <!-- change the disable to reflect the correct array position -->
      <ion-select [(ngModel)]="qty" *ngIf="product.type==variable" [disabled]="disabled[i]">
        <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>
    <!-- Add the index in the end of your click method -->
    <button [disabled]="disabled[i]" color="light" class="addbtn" ion-button clear (click)="addlist(product.name,product.id,product.price*product.quantity,product.quantity,product.images[0].src, i)">ADD</button>
 </ion-card>