Question

我是离子的新手，我想测试一个firebase登录并处理它（错误的密码，用户未找到等...）。问题是，当我点击登录按钮时，它总是告诉我ERROR TypeError: Cannot read property 'toastController'。我试着看看其他帖子，但我没有发现问题来自哪里。完整错误：

vendor.js:1703 ERROR TypeError: Cannot read property 'toastController' of 
undefined(…)defaultErrorLogger @ vendor.js:1703
ErrorHandler.handleError @ vendor.js:1764
IonicErrorHandler.handleError @ vendor.js:122703
next @ vendor.js:5729
schedulerFn @ vendor.js:4576
SafeSubscriber.__tryOrUnsub @ vendor.js:32170
SafeSubscriber.next @ vendor.js:32117
Subscriber._next @ vendor.js:32057
Subscriber.next @ vendor.js:32021
Subject.next @ vendor.js:39739
EventEmitter.emit @ vendor.js:4556
(anonymous function) @ vendor.js:5004
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.runOutsideAngular @ vendor.js:4930
onHandleError @ vendor.js:5004
t.handleError @ polyfills.js:3
r.runTask @ polyfills.js:3
e.invokeTask @ polyfills.js:3
i.isUsingGlobalCallback.invoke @ polyfills.js:3
n @ polyfills.js:3

登录功能中会抛出错误。

export class HomePage {
  user = {} as User;

  constructor(private toastController: ToastController, private afAuth: AngularFireAuth, public navCtrl: NavController) {

  }

  async login(user: User){
    try {
      const result = this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password)
      .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        var foo;
        if (errorCode === 'auth/wrong-password') {
          foo = {
            message: 'Wrong password',
            duration: 3000,
            position: 'bottom'
          };
        } else if (errorCode === 'auth/user-not-found') {
          foo = {
            message: 'User not found',
            duration: 3000,
            position: 'bottom'
          };
        }
        else
        {
          foo = {
            message: errorMessage,
            duration: 3000,
            position: 'bottom'
          };
        }

        this.toastController.create(foo).present();
      });
    } catch (error) {
      //console.log(error.N);
    }

  }

  register(){
    this.navCtrl.push("RegisterPage");
  }
}

提前感谢您的帮助

Answer 1

问题 When should I use Arrow functions in ECMAScript 6?包含解决问题的线索。

您必须了解一方面使用function关键字声明的函数的不同行为，以及＆＃34; arrow＆＃34;另一方面，这些功能。

在您使用的catch()回调中：

.catch(function(error) {
    // ...
})

经典的JavaScript function语法创建一个新的执行上下文并将this绑定到它。这就是为什么你打电话给你的函数后期的原因：

this.toastController.create(foo).present();

this不再引用您的类，而是引用函数本身，并且该函数中显然没有toastController属性，因此您在未定义的属性上调用create()因此错误信息。

错误类型错误：无法读取属性＆＃39; toastController＆＃39;

如果在回调中使用箭头函数语法，则不会在函数内部创建新的上下文，this将引用外部上下文：类的内容。

.catch((error) => {
    // ...
})

我还建议您阅读： ES6 In Depth: Arrow functions 。

TypeError：无法读取属性＆＃39; toastController＆＃39; undefined（）离子3

1 个答案: