ng-bootstrap typeahead 不正确的样式与谷歌地图放置自动完成

Question

我正在开发一个使用 Ng-Bootstrap 的 typeahead 指令的 Angular 4 应用程序。在维基百科示例中，他们对维基百科进行 api 调用，并在预先键入框中显示结果。我正在尝试做同样的事情，但使用的是谷歌地图的地方自动完成服务。

按照维基百科的例子，我创建了一个类似的服务，它返回一个包含自动完成位置的 Rxjs 可观察量。

search(term: string) {
if (term === '') {
return Observable.of([]);
}
return Observable.create(observer => {
this.autocompleteService.getPlacePredictions({ input: term }, (results, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
observer.next(results.map(result => result.description));
observer.complete();
} else {
console.log('Error - ', results, ' & Status - ', status);
observer.next({});
observer.complete();
}
});
});
}

在控制器端，我的代码如下所示：

search = (text$: Observable<string>) =>
text$
.debounceTime(300)
.distinctUntilChanged()
.switchMap(term =>
this.service.search(term)
.do(() => this.searchFailed = false)
.catch(() => {
this.searchFailed = true;
return Observable.of([]);
}))

这很好用，但由于某种原因，预键入栏出现在不正确的位置，直到某些内容触发重绘。

请注意顶部图像上的输入字段和预键入之间的间隙

按任何键或单击屏幕上的任意位置会立即纠正它，但我不知道如何

第一次正确。根据我的研究，这似乎是谷歌地图放置自动完成服务在NgZone之外运行并且不触发重绘的问题，但我没有运气使用任何手动强制重绘的常用策略(ApplicationRef.tick((，NgZone.run((，ChangeDetectorRef.detectChanges(((。

任何建议将不胜感激！

编辑：具有类似行为的 Plunker： https://embed.plnkr.co/iy2Zhd5rEhBK2aVbBqsB/

Answer 1

我明白了！NgZone 最终做到了这个伎俩，但我不得不把它放在回调中，而不是包装它。

search(term: string) {
if (term === '') {
return Observable.of([]);
}
let result = Observable.create(observer => {
this.autocompleteService.getPlacePredictions({ input: term }, (results, status) => {
this.ngZone.run(() => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
observer.next(results.map(result => result.description));
observer.complete();
} else {
console.log('Error - ', results, ' & Status - ', status);
observer.next({});
observer.complete();
}
});
});
});
return result;
}