Angular 7 привязка данных задерживается - PullRequest
Новая
       6

Angular 7 привязка данных задерживается

0 голосов
/ 06 ноября 2018

У меня проблема с задержкой привязки данных Angular.

Когда значение this.notAvailable изменяется, [class.hide] не обновляется на веб-интерфейсе в течение ~ 5 секунд после выполнения кода.

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

Код выглядит следующим образом:

xxx.ts 

getPostcodeGeo(postcode) {
  postcode = postcode.replace(' ', '');
  this.geocoder.geocode({'address': postcode}, (result, status) => {
    if (status === google.maps.GeocoderStatus.OK) {
      this.notAvailable = false;
      console.log(this.notAvailable);
    }
    if (status === google.maps.GeocoderStatus.REQUEST_DENIED) {
      this.notAvailable = true;
      console.log(this.notAvailable);
    }
  });
}

xxx.html 

<div [class.hide]="notAvailable">
  <span>Unable to find address</span>
</div>

Сначала я подумал, что геокодеру нужно немного времени, но потом я добавил console.logs, чтобы посмотреть, есть ли задержка в консоли.

Я что-то здесь не так делаю?

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 06 ноября 2018

Как упоминалось выше, проблема в том, что код обратного вызова, переданный методу this.geocoder.geocode(...), выполняется за пределами угловой зоны. Когда это происходит, Angular не знает об изменениях в свойстве this.notAvailable, пока что-то еще не вызовет Angular, чтобы выполнить цикл обнаружения изменений в будущем. Чтобы это исправить, вам нужно получить ссылку на зону Angular и обернуть изменения, вносимые в код, чтобы Angular знал, что нужно выполнить цикл обнаружения изменений. 

constructor(private ngZone: NgZone) {}

...

getPostcodeGeo(postcode) {
  postcode = postcode.replace(' ', '');
  this.geocoder.geocode({'address': postcode}, (result, status) => {
    this.ngZone.run(() => {
      if (status === google.maps.GeocoderStatus.OK) {
        this.notAvailable = false;
        console.log(this.notAvailable);
      }
      if (status === google.maps.GeocoderStatus.REQUEST_DENIED) {
        this.notAvailable = true;
        console.log(this.notAvailable);
      }
    });
  });
}
...