javascript - 单击按钮后 Ionic-Angular 无法更新 View

Question

为什么单击 ion-alert 组件中的按钮后， View 没有更新？ 例如，如果我的组件中有一个名为 sending 的属性以及 ionic 警报按钮的处理程序:

  // in my component
  public sending = false;

 constructor(
    public alertCtrl: AlertController,
    ) { }

  async deleteFile() {
    const alert =  await this.alertCtrl.create({
      header: 'Deseas eliminar el archivo?',
      message: '',
      buttons: [
        {
          text: 'Eliminar',
          role: 'eliminar',
          cssClass: 'btn-alert',
          handler: () => {
            this.sending = true;
          }
        }
      ]
    });

     await alert.present();
  }

  <!-- in my view -->
<div> {{  sending  }}  </div>

除非我在处理程序内调用 Angular 方法 ** markForCheck () **，否则 View 不会更新。

我正在使用 ionic 4 和 Angular。

英语不是我的母语，所以请原谅任何错误

Answer 1

这里查看我在代码中的注释。我希望这解释了这是预期的行为，并且有两种方法可以更新“发送”属性的值(在处理程序或 onDidDismiss Hook 内):

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.css'],
})
export class HomePage {

  public sending = false;

 constructor(
    public alertCtrl: AlertController,
    ) { }

  async deleteFile() {
    const alert =  await this.alertCtrl.create({
      header: 'Deseas eliminar el archivo?',
      message: '',
      buttons: [
        {
          text: 'Eliminar',
          role: 'eliminar',
          cssClass: 'btn-alert',
          handler: () => {
            // this update of property "sending" happens in the "alert" component and the HomePage component does not learn about this change until next change detection cycle:
            this.sending = true;
          }
        }
      ]
    });
    await alert.present();
    alert.onDidDismiss().then(() => {
      // this update will happen after "alert" dismiss and within the scope of the HomePage component. 
      this.sending = true;
    });
  }
}

玩一下: https://stackblitz.com/edit/ionic-4-template-psfsbd