如何从 Angular 组件中的函数内部访问变量

Question

export class MapsComponent implements OnInit {
@ViewChild('googleMap') gmapElement: any;
map: google.maps.Map;  
data = "initialised";
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'm modified in directionsService";
/**********************************************************
Here the directions are displaying correctly but `this.data`'s value is not changing. What is the reason?
************************************************************/
} else {
alert('Directions request failed due to ' + status);
}
});
}
}

.HTML

<span>{{data}}</span> <!---------Here data is always showing as `initialised`, but directions are displaying perfectly---------->

即使在使用箭头函数后，类成员data的值在函数内也不会更改。data的值始终显示initialised。有人可以检查代码中的注释并告诉我答案。

提前谢谢。

Answer 1

试试这是否有效。

import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
constructor(
private cdr: ChangeDetectorRef
) { }

修改此部分

if (String(status) === 'OK') {
directionsDisplay.setDirections(response);
this.data = "I'm modified in directionsService";
//this.cdr.markForCheck(); // Changed
this.cdr.detectChanges(); 
} else {
alert('Directions request failed due to ' + status);
}