Açılış 2+'de bootstrap modda Google otomatik tamamlama nasıl oluşturulur?

Question

Adım Google Maps (agm) kullanıyorum.

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

ben önyükleme modal yukarıdaki kodu koyarsanız, google otomatik tamamlama çalışmıyor

Ts Dosya 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;" 

yılında

Not: kodunun üzerinde

Answer 1

Normal görünümde çalışıyor ve bir modal çalışmaz, bu yüzden sorununuzu tahmin yaklaşık olan (normal görünümde) önyükleme modal olmadan çalışıyor z-endeksi css özelliği.

çözüm modal önyükleme Z dizini daha google otomatik tamamlama öğenin z-index ayarlamaktır:

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

Kaynak: https://github.com/twbs/bootstrap/issues/4160

bu sorunun eminim eğer çünkü Sadece ngx-bootstrap modal & AGM (you're using an old version is sebm-google-map) için tüm yönergeleri izleyin, hata olmadığını göreceksiniz, ancak yalnızca otomatik tamamlama öğesi gösterilmiyor.

I (açısal, NGX-önyükleme, açısal-google-haritalar) yarattığı bu plunker içinde bak ve tüm gayet:

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