Angular (2+) - 在数据绑定插值中得到延迟

Question

我正在使用 google 的位置建议 API 构建位置搜索输入。一切正常，结果几乎立即返回，但我在显示数据时遇到了几个问题。

• 建议从服务返回，但有时可能需要几秒钟才能显示在视图中（您可以看到延迟，因为结果会立即显示在控制台中，但需要一些时间才能在视图中更改）
• 有时视图中显示的结果会显示最后一组结果，而不是当前结果

我已经编写了我在 StackBlitz 上尝试做的事情的基本副本，https://google-location-suggestions.stackblitz.io，但在这里仍然遇到同样的问题。我已对其进行了更新，使其具有更好地显示问题的加载状态。

StackBlitz 与编辑器的链接： https://stackblitz.com/edit/google-location-suggestions

我还在此处添加了一个视频，以便您了解我的意思： https://vimeo.com/271476965

如果有人知道为什么会发生这种情况，我将不胜感激。

Answer 1

“延迟”与变化检测有关，如果你在输入位置搜索后点击文档，angular会获取事件并刷新DOM。

地图 api 在角度加载后下载，这使得地图代码在 ngZone 之外运行。我在阅读this post 时理解了这一点。

主要解决方法（正如您之前在回答中提到的）是使用 ngZone.run 在 Angular Zone 中运行代码：

private suggestions$ = new BehaviorSubject([]);

public search(location: string): void {
    this.service.getPlacePredictions(
      {
        input: location,
        componentRestrictions: { country: 'uk' }
      },
      (predictions, status) => this._ngZone.run(() => this.suggestions$.next(predictions.map(p => p.description)))
    );
  }

我还添加了一些其他改进：

在构造函数中只加载一次maps api以避免已经加载的错误（stackblitz aot也会导致多次加载服务，所以我将重新加载机制更改为左下菜单的页面）：

constructor(private mapsAPILoader: MapsAPILoader) {
    this.mapsAPILoader.load().then(() => {
      this.service = new google.maps.places.AutocompleteService();
      console.log('Maps API loaded');
      this.mapsApiLoading$.next(false);
    });
  }

您可以使用 rxjs 管道创建所需的 observable：

this.locationSuggestions$ = this.locationForm.get('location').valueChanges.pipe(
        filter(location => location && location !== ''),
        switchMap(location =>
            this.appService.getLocationSuggestions(location)));

这样你就可以在模板中使用async直接订阅你的observable：

<ng-container *ngIf="locationSuggestions$ | async as suggestions; else loading">
{{ suggestions | json }}
</ng-container>
<ng-template #loading>
  loading...
</ng-template>

有时，如果我足够快，我可以在加载地图 api 之前进行搜索，所以我添加了一个 loading observable，让组件知道他什么时候可以开始搜索。

Here is the new stackblitz with the changes.

Answer 2

@ibenjelloun（谢谢）建议的问题是变更检测。

我实现了 Angular 的 NgZone 来运行更改检测，以便通过将代码包装在 ngZone.run 方法中来更新绑定

this.ngZone.run(() => {
    this.locationSuggestionsLoading = false;
    this.locationSuggestions = locations;
});