角度6，AGM在Google自动填充中选择第一个地址

问题描述

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

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.

先谢谢了.

推荐答案

花了很多时间在寻找解决方案上，终于找到了解决方案，

After so much time spending on searching for the solution finally found it,

如果您已经在 Angular 2,4 5&中执行了Google地址建议(自动填充) 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

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

---

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

---

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

这篇关于角度6，AGM在Google自动填充中选择第一个地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！