1

Google Places Autocomplete API を textField で使用して、何かを入力したときに都市の候補を表示できるようにしたいと考えています。私のtextFieldは、ngModelを使用して変数「searchFieldValue」にバインドされています。textBox に何かを入力すると、この変数は正しい値を保持します。しかし、入力を開始してから Google オートコンプリートから何かを選択すると、「searchFieldValue」はその選択したものに更新されません。入力した部分のみが保持されます。例: 「和紙」と入力してから「」を選択します。 Google API によって提供される、提案された都市からのワシントン、USA」。テキストフィールドには「ワシントン、USA」がありますが、私の変数「searchFieldValue」には「Washi」しかありません。この変数には、テキストフィールドと同じデータ「ワシントン、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();
  }

}
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 に答える