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

Question

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

 <ion-item>
     <ion-label>Values</ion-label>
     <ion-select formControlName="Values" multiple="true">
          <ion-option value="1">1 value</ion-option>
          <ion-option value="2">2 value</ion-option>
          <ion-option value="3">3 value</ion-option>
          <ion-option value="4">4 value</ion-option>
         <ion-option value="5">5 value</ion-option>
    </ion-select>
 </ion-item>

Answer 1

下面的代码将满足您的要求。更改复选框限制以增加或减少可选择的选项数量。也欢迎提供优化建议。

工作演示

组件文件

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

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

  selectedIng : Array<any>=[];
  numberOfChecks : number=1;
  checkBoxLimit : 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-list>
  <ion-item  *ngFor="let ing of pizzaIng; let i = index">
    <ion-label>{{ing.name}}</ion-label>
    <ion-checkbox [(ngModel)]="ing.checked"  [disabled]="ing.checked==false && numberOfChecks>=checkBoxLimit"  (ionChange)="updateIng(ing)"></ion-checkbox>
  </ion-item>
</ion-list>