使用 Google Places Autocomplete API 时，textBox 的 ngModel 没有保存正确的值

Question

我想将 Google Places Autocomplete API 与 textField 一起使用，这样我在输入内容时就可以看到城市建议。我的 textField 使用 ngModel 绑定到变量 "searchFieldValue"。如果我在文本框中键入内容，此变量将保存正确的值。但是，如果我开始输入，然后从 Google 自动完成中选择某些内容，"searchFieldValue" 将不会更新为所选内容 - 它只包含我输入的部分。例子：我键入："Washi"，然后从 Google API 提供的建议城市中选择 "Washington, USA"。虽然文本框里有"Washington, USA"，我的变量"searchFieldValue"只有"Washi"。我希望此变量包含与文本字段中相同的数据，即 "Washington, USA".

我该怎么做？

这是我的组件：

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

在 autoCompleteSearchBoxInit 中你可以添加以下内容，你可以处理它。

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

使用 Google Places Autocomplete API 时，textBox 的 ngModel 没有保存正确的值

ngModel of textBox doesn't hold the correct value when using Google Places Autocomplete API

google-places-api

typescript

angular2-ngmodel

angular