首页 > 解决方案 > Ionic 4 不是异步警报

问题描述

您好,我尝试在单击 ion-toggle 时打开警报以询问用户是否确定执行此操作,但是由于异步,在打开警报之前,togle 会发生变化...有人可以解释一下如何处理切换对警报采取行动?谢谢 !你可以在这里看到我的代码:

网页:

<ion-toggle slot="end" (ngModelChange)="onToggleAppareil(appareil)" [(ngModel)]="appareil.status"></ion-toggle> 

TS功能:

public async onToggleAppareil(appareil:any){
      if(appareil.status == true){
      let alert = await this.alertCtl.create(
        {
          header: 'Voulez vous continuer ?',
          message:'Cette action va éteindre l\'appareil sélectionné',
          buttons:[
            {
              text:'Annuler',
              handler: ()=>{
                appareil.status = true;
              },
              role:'cancel',
              cssClass:'secondary'
            },
            {
              text:'Confirmer',
              handler: ()=>{
                appareil.status = false;
              }
            }
          ]
        }
      );
       alert.present();
    }
  }

(仅当用户想要禁用切换时才会显示此警报,但如果取消则为 true => false => true 异步原因)

标签: ionic-frameworkionic4alertion-toggle

解决方案


您应该使用点击事件来触发您的功能

(click)="onToggleAppareil(appareil)"

ngModelChange在模型更改时触发,请在此处阅读更多信息:https ://stackoverflow.com/a/45075106/1934484

额外的

public async onToggleAppareil(appareil: { status: boolean }) {
  if (appareil.status) { // thruthy values
      let alert = await this.alertCtl.create(
        {
          header: 'Voulez vous continuer ?',
          message:'Cette action va éteindre l\'appareil sélectionné',
          buttons:[
            {
              text:'Annuler', // unnecessary to set to true because it is already true
              role:'cancel',
              cssClass:'secondary'
            },
            {
              text:'Confirmer',
              handler: () => appareil.status = false;
            }
          ]
        }
      );

      await alert.present(); // added await like stated in docs
    }
  }

推荐阅读