Check out my Angular Component
export class MapsComponent implements OnInit {
@ViewChild('googleMap') gmapElement: any;
map: google.maps.Map;
data = "initialized";
ngOnInit() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(this.gmapElement.nativeElement, {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
directionsService.route({
origin: "terrell hills, tx",
destination: "alamo heights, tx",
travelMode: google.maps.TravelMode.DRIVING
}, (response, status) => {
if (String(status) === 'OK') {
directionsDisplay.setDirections(response);
this.data = "I've been updated by directionsService";
} else {
alert('Directions request failed due to ' + status);
}
});
}
Here is how it looks in my Template
<span>{{data}}</span> <!-------------this always shows "initialized"-------------->
Can anyone explain why the main class member 'data' is not being updated?
- The value of
alert(this.data)before
is initializedthis.data = "I'm modified in directionsService"; - The value of
alert(this.data)after
is I'm modified in directionsServicethis.data = "I'm modified in directionsService"; - However, the main class member
dataremains unchanged. - I tried creating another function
. Callingfunction testFunc(x:any) { this.data = x; }this.testFunc("some text")fromngOnInit()successfully updatesdata, but calling it withindirectionsService.routedoes not work - Assigning
var self = thisoutside the function and using
also did not solve the issue.self.data = "some text with self"
Any help on this would be greatly appreciated. Thank you.