Angular 2 Can't Call Class Function
Solution 1:
You should use an arrow function, the this
keyword will the one for your component and not the one of the callback function. Something like that:
geocoder.geocode( { 'address': address + ', ' + postcode}, (results, status) => {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].geometry.location.lat() + " " +results[0].geometry.location.lng());
} else {
this.logError("Error " + status);
}
});
In this case, logError
is a method of your current class.
To give you more details, when using the this
keyword in a function, it corresponds to the object the function is executed on:
// Example #1functiontest() {
console.log(this);
}
test(); // prints null// Example #2var obj2 = {
test: function() {
console.log(this);
}
};
obj2.test(); // prints obj2// Example #3var obj3 = {
test: function() {
console.log(this);
}
}
var fct3 = obj3.test;
fct3() // prints null!!// Example #4var obj4 = {
test: function() {
geocoder.geocode({ ... }, function(results, status) {
console.log(this);
});
}
};
obj2.test(); // doesn't print obj2
When you provide a callback, it will be executed as a function outside any object as a context or with a specific context (and not the caller one). This means that inside your callback the this
keyword corresponds to the context your callback is executed on and sure, it's not the component instance.
It's a common problem in JavaScript application. Arrow functions aren't classical functions and introduce the "lexical this" concept. This means that they don't use their own this
but use the one from the caller:
var obj2 = {
test: function() {
geocoder.geocode({ ... }, (results, status) => {
console.log(this);
});
}
};
obj2.test(); // prints obj2
This link could help you: https://toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping/. See the section: "Functionality: lexical scoping this".
Hope it helps you, Thierry
Post a Comment for "Angular 2 Can't Call Class Function"