代码之家 › 专栏 › 技术社区 › Stefano Toppi

Ionic不在视图中更新变量

ionic4 ionic-framework angular

0

Stefano Toppi · 技术社区 · 7 年前

我有个问题 离子4 为什么 安古拉 R不会用新的警报控制器实时更新视图。

例如,我有一个简单的倒计时代码,当完成后,在模式alert中单击ok后计时器再次启动。

我有这个密码 控制器 :

   outputRemainingTime: string;
    secondsRemaining:  number = 60;

    initTimer() {
      this.timerTick();
    }

    timerTick() {
    //this.ngZone.run(() => {
      this.timerInterval = setTimeout(() => {
         if (this.isPause) { return; }
           this.secondsRemaining--;
           this.outputRemainingTime = this.getSecondsAsDigitalClock(this.secondsRemaining);
           if (this.secondsRemaining > 0) {
               this.timerTick();
            } else {
               this.onFinishSession();
            }
          }, 1000);
       //})
     }

    getSecondsAsDigitalClock(inputSeconds: any) {
      const secNum = parseInt(inputSeconds.toString(), 10); // don't forget the second param
      const hours = Math.floor(secNum / 3600);
      const minutes = Math.floor((secNum - (hours * 3600)) / 60);
      const seconds = secNum - (hours * 3600) - (minutes * 60);
      let minutesString = '';
      let secondsString = '';
      minutesString = (minutes < 10) ? '0' + minutes : minutes.toString();
      secondsString = (seconds < 10) ? '0' + seconds : seconds.toString();
      return minutesString + ':' + secondsString;
    }

    onFinishSession() {
      showAlert()
    }

  async showAlert() {
    const alert = await this.alertCtrl.create({
      header: "Header Title",
      message: "Messaggio",
      buttons: [
        {
          text: 'Ok',
          handler: () => {
            this.secondsRemaining = 5;
            this.initTimer();  
          }
        }
      ]
    });
    await alert.present();
  }

视图中的代码:

<ion-header>
  <ion-toolbar>
    <ion-title>timer</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    {{ outputRemainingTime }}
</ion-content>

问题是新的异步警报控制器,如果用代码和视图替换我的警报函数

showAlert() {
    this.secondsRemaining = 5;
    this.initTimer()
}

1 回复 | 直到 7 年前

1

0

Chris 7 年前

尝试改用ondiddismisse或onwilldismisse:

alert.onDidDismiss().then(() => {
  // make model changes here
});

用你的例子:

async showAlert() {
  let resetTimer = false;

  const alert = await this.alertCtrl.create({
    header: "Header Title",
    message: "Messaggio",
    buttons: [
      {
        text: 'Cancel'
      },
      {
        text: 'Ok',
        handler: () => {
          resetTimer = true;
        }
      }
    ]
  });

  alert.onDidDismiss().then(() => {
    if (resetTimer) {
      this.secondsRemaining = 5;
      this.initTimer();
    }
  });

  await alert.present();
}

Angular没有检测到从同步调用到Alertinput处理函数的变化可能是Ionic端的一个bug,但可以说上面的解决方法可能被认为是异步编程的更好形式。