Angular 4：Google Places自動填充API無法正常工作

Question

我試圖創建一個角度為4的自動完成輸入字段。我對角度框架和Typescript並不陌生。 根據需求，我應該使用angular 4（Typescript）來實現。 但是在使用angular 4時，API的響應不好。實際上，我想創建“位置自動提示”對象。 但是得到了以下回應...

Observable {_isScalar: false, source: Observable, operator: MapOperator}

如果您熟悉此類問題，請向我建議解決此問題的正確方法。 提前致謝。

google.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/Rx';

@Injectable()
export class GooglePlaces {

  constructor(private http: Http) {}

  getPlaces(place) {
          const key = "xxxxxxxxxxxx-axxxxxx-xxxxaxx";
          return this.http.get("https://maps.googleapis.com/maps/api/place/autocomplete/json?input="+place+"&components=country:in&key="+key).map(res => res.json());
  }


}

Answer 1

您需要.subscribe到http.get()返回的觀察值。

你可以做

• this.http.get("https://maps.googleapis.com/maps/api/place/autocomplete/json?input="+place+"&components=country:in&key="+key).map(res => res.json()).subscribe(result => this.result = result);

要么

• this.http.get("https://maps.googleapis.com/maps/api/place/autocomplete/json?input="+place+"&components=country:in&key="+key).subscribe(result => this.result = result.json());

當然，這需要您在組件中定義this.result 。 如果要返回可觀察的對象，只需讓該方法.subscribe()返回，然后從調用它的位置將其.subscribe()返回。

更新：確實與該問題的技術問題無關，但是與之相關，也許還需要使其生效。 使用Google地方信息自動完成功能的正確方法是使用地方信息庫而不是AJAX請求。 看看這個SO答案 。