ngModel von textBox hält nicht den korrekten Wert bei der Verwendung von Google Places Autocomplete API

Question

Ich mag Google Places Autocomplete API mit einem Textfield verwenden, so dass ich Vorschläge der Städte sehen kann, wenn ich etwas eingeben. Mein TextField ist mit ngModel an eine Variable "searchFieldValue" gebunden. Diese Variable enthält den richtigen Wert, wenn ich etwas in das Textfeld eingeben. Aber wenn ich zu schreiben beginnen, und dann etwas aus dem Google Autocomplete wählen „searchFieldValue“ wird aktualisiert, nicht auf das gewählte Sache - es hält nur den Teil, den ich in getippt . Beispiel: I-Typ: „Washi“ und dann habe ich Wählen Sie "Washington, USA" aus den vorgeschlagenen Städten, die von Google API zur Verfügung gestellt werden. Obwohl im Textfeld gibt es „Washington, USA“, meine Variable „searchFieldValue“ nur „Washi“. Ich würde diese Variable wie die gleichen Daten wie im Textfeld enthalten, die „Washington, USA“ ist.

Wie kann ich das tun?

Hier ist meine Komponente:

import { Component, OnInit } from '@angular/core'; 

import { WeatherAPIService } from './weatherAPI.service'; 


declare var google: any; //for Places Autocomplete API 

@Component({ 
    selector: 'my-cities-search', 

    template: ` 
       <input class="form-control input-lg" #box id="searchTextField" (keyup.enter)="searchBoxChanged()" 
       (blur)="searchBoxChanged()" [(ngModel)] = "searchFieldValue"> 
      `, 

    styleUrls: [ 'app/cities-search.component.css' ], 

}) 

export class CitiesSearchComponent implements OnInit { 

    constructor(
       private weatherAPIService: WeatherAPIService 

     ) { } 

    //content of searchbox field 
    searchFieldValue: string = ""; 

    autoCompleteSearchBoxInit() { 
    var input = document.getElementById('searchTextField'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
    } 

    searchBoxChanged() { 
    console.log(this.searchFieldValue) 
    if (this.searchFieldValue != "") 
     this.weatherAPIService.cityName = this.searchFieldValue; 
    } 


    ngOnInit(): void { 
    this.autoCompleteSearchBoxInit(); 
    } 

} 

Answer 1

In autoCompleteSearchBoxInit können Sie die unten hinzufügen und Sie können damit umgehen.

google.maps.event.addListener(autocomplete, 'place_changed',() => { 
    this.zone.run(() => { 
     var place = autocomplete.getPlace(); 
     //handle your logic using place variable 
    }); 
});