Как получить доступ к переменным внутри функции в Angular Component

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);
      }