I am facing a quite strange behaviour of my DOM element, by building an application with angular 2.
I am using a canvas element to draw a graph inside of it and I am selecting the element by using @ViewChild. Somehow angular says that it can not further execute any methods because of undefined.
So I logged out exactly before the error occurs.
console.log(this);
console.log(this.graphCanvas);
The result:
Hope you get what I mean. this contains the graphCanvas element but if I try accessing it I got a undefined.
EDIT: I am using a map to draw circles on this map (data viz project). The problem only occurs when I start the application and only if I use the search the first time. Both methods, search and click on circle, head to the same methods.
Click on Circle - working:
cityCircle.addListener('click', function (e) {
localThis.currentCity = cityCircle.data_obj;
localThis.cityClicked = true
localThis.zone.run(() => {});
cityCircle.setOptions({
fillColor: '#d7490b',
strokeColor: '#026384'
});
if (localThis.currentCircleInMap) {
localThis.currentCircleInMap.setOptions({
fillColor: '#026384',
strokeColor: '#026384'
});
}
localThis.currentCircleInMap = cityCircle;
localThis.map.setCenter({
lat: localThis.currentCity.geo_data.lat,
lng: localThis.currentCity.geo_data.lng
});
localThis.map.setZoom(10);
localThis.setGraphView(localThis.currentCity.data_by_year);
});
Search - not working:
autoCompleteClicked(event): void {
try {
var cityClickedKey = event.getAttribute('data-city');
} catch (error) {
var cityClickedKey = event.value;
}
this.globalData.migration_data.forEach(element => {
if (element.city.includes(cityClickedKey)) {
this.currentCity = element;
this.map.setCenter({
lat: this.currentCity.geo_data.lat,
lng: this.currentCity.geo_data.lng
});
this.map.setZoom(10);
this.highlightClickedCircle()
this.cityClicked = true;
}
});
(<HTMLInputElement>document.getElementById("search")).value = this.currentCity.city;
this.autoCompleteAvailable = false;
this.setGraphView(this.currentCity.data_by_year);}
In the setGraphView method the element child is not set.
