Javascript 无法在回调内设置角度变量

我正在使用谷歌地图方向服务来计算旅行时间

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保持为空。
我想这与回调函数和作用域有关，但我无法修复它。

---

此外，route函数返回void，no promise，因此我不能使用。then（）

我认为您的作用域不是您所期望的，这是正确的。 根据您使用的编辑器/IDE，在引用时会出现错误

this.travelTimeDriving = point.duration.text;

如果您的作用域不正确/变量未在您期望的作用域中声明。在我看来，您应该引用类成员，您的类（调用此函数）中是否声明了该变量

我假设，如果在设置值之后立即记录该值，就会看到结果

 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”在该点的作用域

---

如果你能分享更多的周围代码，你会更容易接近它。

我认为你的范围不是你所期望的范围是正确的。 根据您使用的编辑器/IDE，在引用时会出现错误

this.travelTimeDriving = point.duration.text;

如果您的作用域不正确/变量未在您期望的作用域中声明。在我看来，您应该引用类成员，您的类（调用此函数）中是否声明了该变量

我假设，如果在设置值之后立即记录该值，就会看到结果

 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”在该点的作用域

---

如果您可以共享更多的周围代码，那么将更容易帮助您接近。使用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;
      }
    }));
  }
}

---

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

---

---

我在同一个类中声明了变量travelTimeDriving:string；当我像在您的示例中那样记录时，它记录的是正确的值，奇怪的是，当我记录“this”时，它记录的是当前组件，因此当我设置此值时，应该是正确的。travelTimeDriving Out of DirectionService.route（），它正在工作，但此时我还没有point.duration.text值如果路由（）函数将只返回一个承诺，即我在同一个类中声明变量travelTimeDriving:string；当我像在您的示例中那样记录时，它记录的是正确的值，奇怪的是，当我记录“this”时，它记录的是当前组件，因此当我设置此值时，应该是正确的。travelTimeDriving Out of DirectionService.route（），它正在工作，但此时我还没有point.duration.text值如果路由（）函数只会返回一个承诺，这将是很好的。你能解释为什么你会拒绝投票吗？你能解释为什么你会拒绝投票吗？我什么时候/如何将它分配给我的全局变量this.travelTimeDriving，这样我就可以在我的html{{travelTimeDriving}中使用它？我正在运行一个沙箱来回答这个问题，但现在，您是否尝试过导入'rxjs/add/operator/toPromise'这样您就可以调用directionsService.route（请求，（响应，状态））.toPromise（）.then（）？这听起来是一个不错的解决方案，但我得到了一个错误：属性“toPromise”在类型“void”上不存在，我可以重现您的问题。解决方案如上。可能无法在回调函数内设置角度变量。这个问题与谷歌地图和方向服务无关。什么时候/如何将它分配给我的全局变量This.travelTimeDriving，这样我就可以在我的html{{travelTimeDriving}}中使用它？我正在运行一个沙箱来回答这个问题，但现在，您是否尝试过

导入'rxjs/add/operator/toPromise'

这样您就可以调用directionsService.route（请求，（响应，状态））.toPromise（）.then（）？这听起来是一个不错的解决方案，但我得到了一个错误：属性“toPromise”在类型“void”上不存在，我可以重现您的问题。解决方案如上。可能无法在回调函数内设置角度变量。这个问题与谷歌地图和方向服务无关。