Ionic 离子3 -点击离子切换后显示确认警报

rvpgvaaj  于 2022-12-09  发布在  Ionic
关注(0)|答案(2)|浏览(170)

我尝试在离子切换上使用点击事件,但不起作用。
HTML:

<ion-item>
     <ion-label class="labelToggle">Ativo:</ion-label>
     <ion-toggle (click)="mudarStatusProcesso()" [(ngModel)]="ProcAtivo"></ion-toggle>
  </ion-item>

mudarStatusProcesso()创建了一个带有“ok”和“cancel”选项的AlertController,此操作需要在离子切换更新之前发生。我认为我应该使用其他 prop 来代替"(click)",有人能帮助我吗?

yx2lnoni

yx2lnoni1#

您可以使用(ngModelChange)、

<ion-item>
   <ion-label class="labelToggle">Ativo:</ion-label>
   <ion-toggle [(ngModel)]="ProcActivo" (ngModelChange)="mudarStatusProcesso()"></ion-toggle>
</ion-item>

在您的.ts中,

ProcActivo: boolean = false; // default value

mudarStatusProcesso(){

    let alert = this.alertCtrl.create({
      title: null,
      message: "Confirm?",
      buttons: [{
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          if(this.ProcActivo==false){
            this.ProcActivo=true;
          }else{
            this.ProcActivo=false;
          }
        }
      },
      {
        text: 'Okay',
        handler: () => {

        }
      }
    ]
  });
  alert.present();

  }
a1o7rhls

a1o7rhls2#

对于任何人需要一个更更新的答案(离子4+)。我正在使用(点击)=“banUnban($event)”我们停止传播等,直到他们作出选择,然后相应地设置值...

async banUnban(ev: any){
// prevent checking until we confirm whay they want to do...
ev.stopImmediatePropagation();
ev.stopPropagation();
ev.preventDefault();
const message = ev.target.checked ? 'Are you sure you want to ban this user?' : 'Are you sure you want to unban this user?';
const options = {
  header: 'Please confirm.',
  message,
  okHandler: ()=>{
    this.user.is_blocked= !this.user.is_blocked;
    if(this.user.is_blocked){
      console.log('Ban the user...');
    }else{
      console.log('Unban the user...');
    }
  },
  cancelHandler: () => {
    console.log('Nothing to see here...');
  }
} as IAlertOptions;
const confirm = await this._alertService.showConfirm(options);
confirm.present();
}

相关问题