Access Outside Variable inside a internal function typescript

Question

I have one variable outside a function that I need to change the value. I normally use "this" to access the variable but at that point of the code, "this" is not reachable.

export class GamesDetailPage {

  details : any = {};
  type : String;
  level : Number; 
  cards : any = {}; // THE VARIABLE I WANT TO SET THE VALUE


  constructor(public navCtrl: NavController, public http: HttpClient , private device: Device, private serviceProvider: ServicesProvider,     
                                            public navParams: NavParams
) {
    this.type = navParams.get('gameType');
    this.level = navParams.get('gameLevel');
  }

  ionViewDidLoad() {


    this.getCards();  // WHERE I CALL THE METHOD  
  }


  getCards(){
    var deviceUUID = this.device.uuid;
    var platform =  this.device.platform;
    var cardsReq = {"gameType": this.type ,"gameLevel": this.level};
    var dialog = this.dialogs;

   this.serviceProvider.getCards(deviceUUID, platform, cardsReq)

    .then(function (res){
      this.cards = res;// HERE I WANT TO SET THE VARIABLE BUT "THIS" IS UNDEFINED
    })
    .catch(function(err){
      console.log("Error");
    })
  }
}

Answer 1

Here you need to use ES6 arrow function as in the earlier (function(){ method this does not refer to the class but in the es6 one it will...

An arrow function expression has a shorter syntax than a function expression and does not have its own this

.then( 
(res) => {
      this.cards = res; // Should work now
    }
)

Answer 2

Because the outter this is shadowed by this of the function. The most straight forward way and also the recommend way is to use arrow function in typescript.

Change the lambda function to:

(res) => {}

Another old solution is save this to a temp variable:

that = this

and then access that inside your lambda function.

Answer 3

In JavaScript this relates to the current function. TypeScript just hides this fact when it transpiles your code.

As a result, there are two things you can do.

First you could use ES6 arrow functions (TypeScript will do the this scoping for you)

.then((res) => {
    this.cards = res;
})

Alternatively you could handle it yourself

getCards(){
    var _this = this;

    // More code

    .then(function (res){
        _this.cards = res;
    })

If you check the transpiled output for both cases they should be almost the same