GoogleマップでNg-Bootstrap Typeaheadのスタイルが正しくありませんPlace Autocomplete

Question

Ng-Bootstrapのtypeahead directiveを使用するAngular 4アプリケーションを開発しています。 Wikipediaの例では、Wikipediaへのapi呼び出しを行い、結果をtypeaheadボックスに表示します。私は同じことをやろうとしていますが、代わりにGoogle Mapの場所自動補完サービスを使っています。

ウィキペディアの例に続いて、私はオートコンプリートされた場所を含む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/

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