角度2のブートストラップモーダルでGoogleオートコンプリートを作成する方法+？

Question

私は角度のGoogleマップ（agm）を使用しています。私は以下の方法でGoogleのオートコンプリートを作成しました。

pickAdd() { 
    var autocomplete:any; 
    var options = { componentRestrictions: {country: "IN"} }; 
    this. inputAddress = document.getElementById('address'); 
    autocomplete = new 
    google.maps.places.Autocomplete(this.inputAddress,options) 
    google.maps.event.addListener(autocomplete, 'place_changed',()=> { 
    this.ngZone.run(() => { 
     this.zoom=8; 
     var place = autocomplete.getPlace(); 
     this.lat = place.geometry.location.lat(); 
     this.lng = place.geometry.location.lng(); 
     this.getGeoLocation(this.lat,this.lng); 
    }); 
    }); 
} 

CSS：

sebm-google-map { 
    height: 300px; 
} 

私は、ブートストラップモーダルで上記のコードを入れた場合、Googleのオートコンプリートが機能していない

TSファイル内のHTML

<input type="text" #pick id="address" class="form-control" [(ngModel)]="pickAddress" name="pickAddress" (ngModelChange)="pickAdd()" placeholder="Pick Up Address" onclick="return false" style="padding-left: 30px;border-radius: 25px;border: 1px solid #31708f;" 

で

注：上記のコード

は

Answer 1

それは、通常のビューで動作し、それがモーダルでは動作しませんので、私はあなたの問題を推測さは約である（通常のビューで）、ブートストラップモーダルなしで働いていますz-index cssプロパティ。

ソリューションは、モーダルブートストラップZインデックスよりも多くのGoogleのオートコンプリートアイテムのZインデックスを設定することです：

.pac-container { 
    z-index: 1054 !important; 
} 

出典：https://github.com/twbs/bootstrap/issues/4160

私はこれが問題であると確信していますかの理由ngx-bootstrap modal & AGM (you're using an old version is sebm-google-map)のすべての指示をたどったところ、エラーはなく、オートコンプリート項目だけが表示されていないことがわかります。

https://embed.plnkr.co/N2Oiu5JzirOfUuA8Te3o/