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>

原文地址：https://www.jb51.cc/js/429230.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。