I'm having trouble managing scope context in an Angular component while working with a third-party API (ESRI ArcGIS JavaScript API 4.7). I am specifically struggling when trying to handle an event from the ArcGIS API using their event handler callback. If you click on the map, you'll encounter the error. I believe there should be a way to resolve this issue by handling context properly, but so far, my attempts have been unsuccessful. Closures are not my forte. Any assistance would be greatly appreciated.
Visit this link for more details
ngOnInit() {
this.arcgisService.loaded$.subscribe(loaded => {
console.log("map loaded subscription");
if(loaded) {
this.arcgisService.constructMap({basemap: this.basemap, elevation: true}).then(map => {
this.arcgisService.constructMapView(
{
map: map,
container: this.id,
center: [-117.18, 34.06],
zoom: 15
}
).then(mapView => {
console.log("constructMap.then");
console.log(this);
this.mapView = mapView;
mapView.on("click", function(event) {
//this.test = event.x
this.onMapClick(event.x)
console.log("click event: ", event.x);
});
})
})//end construct map
}
})
}
onMapClick(x){
console.log(x)
}