Currently, I am in the process of developing an app with Ionic 2 Beta and Typescript. I have encountered an error related to how this is used within nested functions in Typescript. Despite my efforts, I am struggling to understand it fully. Below you will find a snippet of my code:
constructor(public navCtrl: NavController, params: NavParams, platform: Platform) {
platform.ready().then((readySource) => {
try {
this.num = params.get("num");
this.unprocData = params.get("data");
var image = <HTMLImageElement>document.getElementById('unprocImg');
image.src = this.unprocData;
image.onload = function() { console.log("images loaded"); this.proc(this.num); }
//some stuff
} catch (err) {
console.log("Problem Starting Render // " + err);
this.navCtrl.push(IndexPage);
}
});
}
proc(num) {
try {
console.log("starting render...");
switch(num) {
case 0:
this.procImg1(function() { //process the image for default vintage greyscale
this.load(this.procData, this.descriptionPoster1, "assets/img/Poster1.png", 250, 310, .6, .6);
}); break;
..
}
} catch (err) {
console.log("Problem Starting Render // " + err);
this.navCtrl.push(IndexPage);
}
}
test() {
this.proc(0);
}
Interestingly, the function test() performs as expected. However, when I call this.proc(..) from within image.onload(), I encounter the error message stating that this.proc is not a function. How can I overcome this issue? Your insights are highly appreciated. Thank you.