javascript – Ionic 3 – 离子选择(多个)选择两个项后禁用所有选项

我想在选中两个选项后禁用所有选项.我试过(ionChange)但是在点击了选择模型的“确定”按钮后触发了这个事件.在“ionChange”之前是否还有其他事件要执行？

 <ion-item>
     ion-item>

最佳答案

下面的代码将满足您的要求.更改复选框限制以增加或减少可以选择的选项数.优化提示也受到欢迎.

Working demo

组件文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',templateUrl: 'home.html'
})
export class HomePage {

  selectedIng : ArrayBoxLimit : any =1;
  constructor(public navCtrl: NavController) {
    this.pizzaIng=[
      {name : "Pepperoni",checked : false},{name : "Sasuage",checked : true},{name : "Mushrooms",checked : false}
    ];
    this.selectedIng=[{name : "Sasuage",checked : true}];    
  }

  updateIng(ing){
      if(ing.checked === true){
      this.selectedIng.push(ing);
      this.numberOfChecks++;
      }else{
        this.selectedIng=this.pizzaIng.filter((ingr)=>{
          console.log(ingr['checked'])
          return ingr['checked']===true;
        })
        this.numberOfChecks--;
      }

    console.log(this.selectedIng);
    console.log(this.numberOfChecks);
  }
}

HTML文件

  ion-item  *ngFor="let ing of pizzaIng; let i = index">
    Box [(ngModel)]="ing.checked"  [disabled]="ing.checked==false && numberOfChecks>=checkBoxLimit"  (ionChange)="updateIng(ing)">Box>
  ion-item>