谷歌地图地点自动完成的Ng-Bootstrap Typeahead不正确的样式

我正在开发使用Ng-Bootstrap的typeahead directive的Angular 4应用程序。在维基百科示例中，他们对维基百科进行api调用，并将结果显示在键入框中。我试图做同样的事情，而是使用Google地图的自动填充服务。谷歌地图地点自动完成的Ng-Bootstrap Typeahead不正确的样式

继维基百科示例之后，我创建了一个类似的服务，它返回一个包含自动完成位置的Rxjs Observable。

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([]); 
       }))

这工作得很好，但由于某些原因，直到有触发重绘预输入栏会出现在不正确的位置。

Note the gap between the input field and the typeahead on the top image

按任意键或点击屏幕上的任何地方立刻纠正它，但我无法弄清楚如何得到它纠正第一次。

从我的研究看来，它似乎可能是一个问题，在NgZone之外运行的Google地图位置自动完成服务并没有触发重绘，但我没有任何常用策略手动强制重绘（ApplicationRef.tick（），NgZone.run（），ChangeDetectorRef.detectChanges（））。

任何建议将不胜感激！

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

来源

2017-08-15 Collin Dutter

通常'NgZone.run（）'应该有效。你能不能把一个重复这个问题的重击者放在一起，以便我们看看？ –

你会在哪里推荐做NgZone.run（）？ –

在调用外部API（谷歌地图）的地方。再次，有一个重现场景的蹲伏者会让我们更快地得到答案:-) –

我知道了！ 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; 
}

来源

2017-08-15 18:57:08

谷歌地图地点自动完成的Ng-Bootstrap Typeahead不正确的样式

回答

相关问题