TypeError：无法读取未定义（）离子3的属性'toastController' [重复]

Posted 2023-04-18

【中文标题】TypeError：无法读取未定义（）离子3的属性\'toastController\' [重复]

【英文标题】：TypeError: Cannot read property 'toastController' of undefined() ionic 3 [duplicate]TypeError：无法读取未定义（）离子3的属性'toastController' [重复]

【发布时间】：2018-06-29 11:38:17

【问题描述】：

我是 ionic 新手，我想测试一个 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");
  

提前感谢您的帮助

【问题讨论】：

你没有其他事情可以标记重复的帖子（这个不是）？你的生活一定很好......

【参考方案1】：

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

一方面，您必须了解使用 function 关键字声明的函数的不同行为，另一方面是“箭头”函数。

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

.catch(function(error) 
    // ...
)

经典的 javascript function 语法创建一个新的执行上下文并将 this 绑定到它。这就是为什么稍后在您调用函数时：

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

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

错误类型错误：无法读取属性“toastController”

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

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

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