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");
})
}
}
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");
})
}
}
Share
Improve this question
edited Feb 20, 2018 at 8:53
marionebl
3,39222 silver badges34 bronze badges
asked Feb 20, 2018 at 8:52
Vinicius MartinVinicius Martin
1891 gold badge4 silver badges15 bronze badges
1
- Possible duplicate of How to access the correct `this` inside a callback? – marionebl Commented Feb 20, 2018 at 8:54
3 Answers
Reset to default 5Here 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
}
)
Because the outter this
is shadowed by this
of the function.
The most straight forward way and also the remend 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.
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