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答案 。