Angular 7 数据绑定被延迟

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