Question

我遇到了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来查看控制台中是否存在延迟。

我在这里做错什么了吗？

任何帮助将不胜感激。

Answer 1

如上所述，问题是传递到this.geocoder.geocode(...)方法的回调代码正在Angular区域之外执行。发生这种情况时，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);
      }
    });
  });
}

Angular 7数据绑定被延迟

1 个答案: