无法在回调中设置 angular 变量

Question

我正在使用 google 地图导航服务来计算行程时间。

this.mapsAPILoader.load().then(() => {
  const p1 = new google.maps.LatLng(50.926217, 5.342043);
  const p2 = new google.maps.LatLng(50.940525, 5.353626);

  const directionsService = new google.maps.DirectionsService();
  const request = {
    origin: p1,
    destination: p2,
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
  };

  directionsService.route(request, (response, status) => {

    if (status === google.maps.DirectionsStatus.OK) {
      const point = response.routes[0].legs[0];
      // console.log(point.duration.text);
      this.travelTimeDriving = point.duration.text;
    }
  });


});

控制台记录了正确的行驶时间，但我的变量 this.travelTimeDriving 保持为空。
我猜它与回调函数和范围有关，但我无法修复它。
路由函数 returns 无效，没有承诺所以我不能使用 .then()

Answer 1

我认为你的范围不是你期望的那样是正确的。根据您使用的 editor/IDE，在引用

时应该会给您一个错误

this.travelTimeDriving = point.duration.text;

如果您的范围是 incorrect/the 变量未在您期望的范围内声明。在我看来，您应该引用 class 成员，您是否在 class 中声明了该变量（调用此函数）？

我假设如果您在设置值后立即记录它，您会看到结果。

 if (status === google.maps.DirectionsStatus.OK) {
  const point = response.routes[0].legs[0];
  // console.log(point.duration.text);
  this.travelTimeDriving = point.duration.text;
  console.log(this.travelTimeDriving);
}

您应该能够通过 console.log 它或设置断点并检查值来确定 "this" 在该点的范围。

如果能多分享一些周边的代码就更容易拉近距离了

Answer 2

使用 NgZone 确保回调将绑定到范围。工作样本：

import { Component, OnInit, NgZone } from '@angular/core';
declare const google: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  travelTimeDriving = '';

  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    let mapProp = {
        center: new google.maps.LatLng(51.508742, -0.120850),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    let map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    const p1 = new google.maps.LatLng(50.926217, 5.342043);
    const p2 = new google.maps.LatLng(50.940525, 5.353626);

    const directionsService = new google.maps.DirectionsService();
    const request = {
      origin: p1,
      destination: p2,
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC,
    };

    directionsService.route(request, (response, status) => this.ngZone.run(() => {

      if (status === google.maps.DirectionsStatus.OK) {
        const point = response.routes[0].legs[0];
        this.travelTimeDriving = point.duration.text;
      }
    }));
  }
}

无法在回调中设置 angular 变量

Unable to set angular variable inside callback

javascript

google-maps

directions

typescript

angular