javascript - Ionic - AlertController 实例抛出未定义的错误

Question

我的页面组件中有一个函数，一旦执行，它将检查 Firebase 数据库中是否存在电子邮件。如果是，我想显示一个显示错误消息的警报 Controller 。

出于某种原因，由于出现错误，我无法执行此操作。代码如下:

doRegister(){
    this.fbAuth.auth.createUserWithEmailAndPassword(this.email, this.password).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        //console.log(error);
        if(errorCode == "auth/email-already-in-use"){
            let alert = this.alertCtrl.create({
                title: 'Low battery',
                subTitle: '10% of battery remaining',
                buttons: ['Dismiss']
             });
             alert.present();
        }
    });           
}

以及我在输入电子邮件并提交表单时遇到的错误:

> core.js:1350 
ERROR TypeError: Cannot read property 'alertCtrl' of
> undefined
>     at registration.ts:34
>     at e.b (auth.js:23)
>     at Yb (auth.js:26)
>     at Ub (auth.js:26)
>     at z.h.Qb (auth.js:25)
>     at Cb (auth.js:19)
>     at t.invoke (polyfills.js:3)
>     at Object.onInvoke (core.js:4629)
>     at t.invoke (polyfills.js:3)
>     at r.run (polyfills.js:3)

我在这里遗漏了什么吗？我实际上是使用 Ionic 官方文档上提供的相同代码来生成警报。

链接在这里:Ionic Documentation for Alert Controller

注意:我使用的是 Ionic 版本 3.19.1

Answer 1

当您在回调函数中时，this 指的是超出您预期的内容。在回调中 this 是您所在的函数，而不是调用它的上下文。

有很多方法可以确保您仍然可以在原始上下文上调用函数。也许最简单的方法是给原来的 this 另一个名称:

doRegister(){
   var self = this;
   this.fbAuth.auth.createUserWithEmailAndPassword(this.email, this.password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    //console.log(error);
    if(errorCode == "auth/email-already-in-use"){
      let alert = self.alertCtrl.create({
        title: 'Low battery',
        subTitle: '10% of battery remaining',
        buttons: ['Dismiss']
      });
      alert.present();
    }

  });           
}

有关此问题的详细说明，请参阅 How to access the correct `this` inside a callback? 。那里接受的答案还包含该问题的一些其他常见解决方案。