Невозможно установить угловую переменную внутри обратного вызова - PullRequest
Новая
       23

Невозможно установить угловую переменную внутри обратного вызова

0 голосов
/ 11 мая 2018

Я использую сервис маршрутов карт 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 остается пустой.
Я думаю, этоимел отношение к функции обратного вызова и области видимости, но я не могу это исправить.
Кроме того, функция маршрута возвращает void, без обещаний, поэтому я не могу использовать .then ()

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Используйте 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;
      }
    }));
  }
}
0 голосов
/ 11 мая 2018

Я думаю, что вы правы в том, что ваша сфера не соответствует вашим ожиданиям. В зависимости от того, какой редактор / 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);
}

Вы должны быть в состоянии выяснить область действия "this" в этой точке с помощью console.log или установить точку останова и проверить значение.

Если вы сможете поделиться большим количеством окружающего кода, было бы легче помочь вам приблизиться.

...