Angular 6，AGM 在谷歌自动完成中选择第一个地址 [英] Angular 6, AGM selects first address in google autocomplete

问题描述

我在我的 angular 项目中使用 AGM 进行谷歌地址建议.如果用户没有选择任何地址，我想选择第一个地址.

Am using AGM for google address suggestion in my angular project. I want to select the first address if user didn't select any.

请任何人对此提出一些建议.

Please anyone give some suggestions for this.

提前致谢.

推荐答案

找了好久终于找到了，

如果您已经在 Angular 2,4 5 & 中实现了谷歌地址建议(自动完成)6 并且想要默认选择第一个建议，这里我们使用工作示例，

If you have already implemented the google address suggestion(autocomplete) in Angular 2,4 5 & 6 and want to select the First suggestion by default, Here we go with working example,

我们必须单独创建一个服务并且需要订阅它.我在下面给出了工作示例，

We have to create an services separately and need to subscribe it. I have given working example below this,

重要提示:请耐心查看并更改名称等等，它肯定会奏效.

Important: Be patient to look into it and alter names and all It will definitely work.

app.component.ts

import { Component } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import { PlacePredictionService } from './place-prediction.service';

import { Observable } from 'rxjs/Observable';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {

  private searchTerm: string;
  private results$: Observable<any[]>;

  testResult = [{description: 'test'},{description: 'test'}];

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private placePredictionService: PlacePredictionService
  ){}

  onSearch(term: string){

  this.searchTerm = term;

  if (this.searchTerm === '') return;

  this.results$ = this.placePredictionService.getPlacePredictions(term);

 }

}

<小时>

place-prediction.service.ts

import { Injectable } from "@angular/core";
import { MapsAPILoader } from "@agm/core";

import { Observable } from "rxjs/Observable";

import "rxjs/add/observable/of";
import "rxjs/add/observable/bindCallback";

@Injectable()
export class PlacePredictionService {
  private autocompleteService;

  constructor(private mapsAPILoader: MapsAPILoader) {

    this.mapsAPILoader.load().then(() => {
      this.autocompleteService = new 
      google.maps.places.AutocompleteService();
    });

  }

  // Wrapper for Google Places Autocomplete Prediction API, returns 
  observable

  getPlacePredictions(term: string): Observable<any[]> {
    return Observable.create(observer => {
    // API Call

    this.autocompleteService.getPlacePredictions({ input: term }, data => {
      let previousData: Array<any[]>;

      // Data validation

      if (data) {
        console.log(data);
        previousData = data;
        observer.next(data);
        observer.complete();
      }

      // If no data, emit previous data

      if (!data) {
        console.log("PreviousData: ");
        observer.next(previousData);
        observer.complete();

        // Error Handling

      } else {
        observer.error(status);
      }

    });

    });

    }
  }

<小时>

app.component.html

<h1>Google Places Test</h1>

<p>Angular 5 &amp; RxJS refresher</p>

<input
  type="search"
  placeholder="Search for place" 
  autocomplete="off"
  autocapitalize="off"
  autofocus
  #search
  (keyup)="onSearch(search.value)"/> 

 <p>{{ searchTerm }}</p>

 <ul>

   <li *ngFor="let result of results$ | async "> {{result.description}} 
   </li>

 </ul>

对我来说这是有效的，如果您遇到任何问题，请添加您的评论(或给我发邮件@[e-mail])，如果我知道您的查询，我会回复

For me it is worked, If you face any problem please add your comment(or mail me @ [e-mail]), If I am aware about your query I will reply back

这篇关于Angular 6，AGM 在谷歌自动完成中选择第一个地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！