Ionic -angular 单击按钮后无法更新视图

Question

为什么点击 ion-alert 组件中的按钮后，视图没有得到更新？例如，如果我的组件中有一个名为 sending 的属性和一个用于 ion-alert 按钮的处理程序：

  // 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 () **。

我正在使用 ionic 4 和 angular。

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

Answer 1

这里看我在代码里面的注释。我希望这可以解释这是预期的行为，并且有两种方法可以更新 "sending" 属性的值（在处理程序或 onDidDismiss 挂钩内）：

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

Ionic -angular 单击按钮后无法更新视图

Ionic -angular failed to update view after click on a button

javascript

angular

ionic4