【问题标题】:Ionic 4 not async alertIonic 4 不是异步警报
【发布时间】:2020-10-16 09:40:12
【问题描述】:

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

HTML:

<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 if cancelled => true cause of the async)

【问题讨论】:

    标签: ionic-framework ionic4 alert ion-toggle


    【解决方案1】:

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

    (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
        }
      }
    

    【讨论】:

    • 感谢您的回答,但在显示警报之前切换仍然会发生变化...
    猜你喜欢
    • 2018-12-14
    • 1970-01-01
    • 1970-01-01
    • 2019-04-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-05
    • 2020-07-09
    相关资源
    最近更新 更多