'This' typescript is undefined

Question

I'm quite new to ionic / angular / typescript and cloudboost, and I'm trying to make this all work together.

I've starded a new ionic project with the "super" starter theme.

I've managed to make work for the cloudboost logIn function, nevertheless I face some issues :

• I didn't succeed to use the user provider as it is using Http service and Cloudboost does not give access to an url, and the original return is an observable.

• I can't access this in the callback function of CBUser.logIn, it is undefined. I tried several way with the fat arrow, but didn't work, so at the moment, I managed with this workaround :

  var falseThis = this;

How can I make it more clean for typescript ?

Here is my login.ts file :

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ModalController, IonicPage, NavController, ToastController } from 'ionic-angular';

import * as CB from 'cloudboost';
import { User } from '../../providers/providers';
import { MainPage } from '../pages';

import { ModalCguPage } from './modal-cgu';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})



export class LoginPage {
  // The account fields for the login form.
  // If you're using the username field with or without email, make
  // sure to add it to the type
  account: { username: string, password: string } = {
    username: '[email protected]',
    password: '01231234'
  };

  // Our translated text strings
  private loginErrorString: string;
  private loginSuccessString: string;
  private redirectPageSuccess : any = MainPage;

  constructor(public navCtrl: NavController,
    public user: User,
    public toastCtrl: ToastController,
    public translateService: TranslateService,
    public modalCtrl: ModalController) {
    this.translateService.get('LOGIN_ERROR').subscribe((value) => {
      this.loginErrorString = value;
    })
    this.translateService.get('LOGIN_SUCCESS').subscribe((value) => {
      this.loginSuccessString = value;
    })



  }

  // Attempt to login in through our User service
  doLogin() {  
//  HERE : get back the main this to use it later
    var falseThis = this;

//  cloudboost login
    let CBUser = new CB.CloudUser();
    CBUser.set('username', this.account.username);
    CBUser.set('password', this.account.password);
    CBUser.logIn({
        success: function(user) {
            let toast = falseThis.toastCtrl.create({
              message: falseThis.loginSuccessString + ' ' + user.username,
              duration: 3000,
              position: 'top'
            });
            toast.present();

            falseThis.navCtrl.push(MainPage);
        }, error: function(error)  {
    //    error: function(error) {
            // Unable to log in
            let toast = falseThis.toastCtrl.create({
              message: falseThis.loginErrorString,
              duration: 3000,
              position: 'top'
            });
            toast.present();
        }

    });
  }
}

Below the original function included in the starter template :

// Attempt to login in through our User service
  doLogin() {
    this.user.login(this.account).subscribe((resp) => {
      this.navCtrl.push(MainPage);
    }, (err) => {
      this.navCtrl.push(MainPage);
      // Unable to log in
      let toast = this.toastCtrl.create({
        message: this.loginErrorString,
        duration: 3000,
        position: 'top'
      });
      toast.present();
    });
  }

If someone can clear things, I would really appreciate. Thank you

---

EDIT WORKING SOLUTION :

in login.ts

// Attempt to login in through our User service
  doLogin() {
    this.user.login(this.account).then( (user:any) => {
        console.log('user displayed ');
        console.log(user.username);

    //  login successful
        let toast = this.toastCtrl.create({
          message: this.loginSuccessString + user.username,
          duration: 3000,
          position: 'top'
        });
        toast.present();

        this.navCtrl.push(MainPage);
    }).catch( err => {
    // Unable to log in
      let toast = this.toastCtrl.create({
        message: this.loginErrorString,
        duration: 3000,
        position: 'top'
      });
      toast.present();
    });
  }

in user.ts :

login(account: any) {
         let CBUser = new CB.CloudUser();
         CBUser.set('username', account.username);
         CBUser.set('password', account.password);
         return new Promise((resolve, reject) =>{
             CBUser.logIn({
                 success: (user) => {
                 //Login successful
                     resolve(user)
                 },
                 error: (error) => {
                     reject(error)
                 //Error in user login.
                 }
             });
         });
     }

Answer 1

I can't access this in the callback function of CBUser.logIn, it is undefined. I tried several way with the fat arrow, but didn't work, so at the moment, I managed with this workaround

I think Pace answered this question. This link helped me as I faced this issue arrow functions.

For CloudBoost callbacks use:

{
  success: (obj) => {
    //success
  },
  error: (err) => {
    //Error
  }
}

I didn't succeed to use the user provider as it is using Http service and Cloudboost does not give access to an url, and the original return is an observable.

The user provider is just an example to kickstart with Http requests. To use the user provider with cloudboost I would suggest changing the login function to something like

login(account) {
let CBUser = new CB.CloudUser();
CBUser.set('username', account.username);
CBUser.set('password', account.password);
return new Promise((resolve, reject) =>{
  CBUser.logIn({
    success: (user) => {
      //Login successful
      resolve(user)
    },
    error: (error) => {
      reject(error)
      //Error in user login.
    }
  })
 })
}

and call the function with:

this.user.login(this.account).then( user => {
  //login successful
  this.navCtrl.push(MainPage);
}).catch( err => {
  this.navCtrl.push(MainPage);
  // Unable to log in
  let toast = this.toastCtrl.create({
    message: this.loginErrorString,
    duration: 3000,
    position: 'top'
  });
  toast.present();
});

Answer 2

The example is using arrow lambdas which changes the rules for what happens with this. Check out this article for details.

success: function(user) {
  //this not accessible
}

success: user => {
  //this is accessible
}