Working in Angular 12 and experiencing an error when I attempt to call a method within another method. Here's an abstraction of what I'm dealing with (in TypeScript as I am in Angular
export class SomeClass {
testvariable
onTaskCompleted(results) {
if (!results) {
return;
} else {
//The line below works
console.log(results);
//The line below throws and error
this.drawSomething(results)
//In fact any reference to something outside of this function throws an error
this.testvariable = results
}
}
//The unique thing about OnTaskCompleted is that it is also used as a callback handler by a 3rd party library which is throwing the error
//It is called in another function like so. It is producing the correct result in onTaskCompleted, but breaks when I do something like above
this.something.onResults(this.onResults);
drawSomething(results) {
if (!results) {
return;
} else {
//perform some work
}
}
}
}When I run this I get a TypeError: Cannot read properties of undefined. If I include the doSomethingElse function in any of the other functions defined in my class I have no issue and it works as expected. The only other thing of note is that the function where I'm having this issue doSomething() is used as a callback by an external library and that seems to be what is throwing the error whenever I include any reference to something 'outside' of doSomething in the doSomething function. Any thoughts would be appreciated
the function where I'm having this issue doSomething() is used as a callback
You're most likely passing the function like this:
library.externalFunction(this.doSomething);
Which is a problem because this parameter is set to the caller, i.e. it will not be the class instance anymore. If doSomething() tries to access a property on this, it will be an error.
One correct way of writing this would be:
library.externalFunction(param => this.doSomething(param));
Arrow functions capture this and behave more like what you'd expect them to behave.
Alternatively, one could explicitly bind this on the function:
library.externalFunction(this.doSomething.bind(this));
There are quite a few answers here that explain function scoping, e.g. https://stackoverflow.com/a/20279485