1

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

我怎么做？

这是我的组件：

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

}
4

1 回答 1

3

在 autoCompleteSearchBoxInit 中，您可以添加以下内容并进行处理。

google.maps.event.addListener(autocomplete, 'place_changed', () => {
    this.zone.run(() => {
        var  place = autocomplete.getPlace();
        //handle your logic using place variable
    });
});
于 2016-10-04T12:22:49.380 回答