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

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