Question

我试图用角度4创建一个自动完成输入字段。我是角度框架和Typescript的新手。根据要求，我应该使用angular 4（Typescript）来实现。但是当使用角度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。如果你想返回observable，只需让方法按原样返回，并.subscribe()从它调用它。

<强>更新与这个问题的技术问题没有真正关系，但是相关并且可能需要让它工作。使用Google商家信息自动填充功能的正确方法是使用Places library代替AJAX请求。看看这个this SO answer。

Angular 4：Google商家信息自动填充API无效

1 个答案: