jak stworzyć autouzupełnianie google w modcie bootstrap w kanciastym 2+?

Question

Używam kątowych map google (agm) i stworzyłem autouzupełnianie google poniższym sposobem.

w 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;" 

w Ts Plik:

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

jeśli mogę umieścić powyższy kod w bootstrap modalnym, google autouzupełnianie nie działa

Uwaga:

Powyższy kod działa bez ładowania początkowego modalnym (w widoku normalnym)

Answer 1

To działa w normalnym świetle, i to nie działa w modalne, więc myślę, że problem jest o z-index Właściwość css.

Rozwiązaniem jest ustawienie z-index Autouzupełnianie elementu Więcej niż modalnego bootstrap z-index:

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

Źródło: https://github.com/twbs/bootstrap/issues/4160

Jestem pewien, że jest to problem, ponieważ jeśli po prostu postępuję zgodnie ze wszystkimi instrukcjami dla ngx-bootstrap modal & AGM (you're using an old version is sebm-google-map) zauważysz, że nie ma błędu, ale tylko pozycja autouzupełniania nie jest wyświetlana.

Look w tym plunker stworzyłem (kątowe, NGX-bootstrap, kątowe-google-mapy) i wszystko jest w porządku:

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