Angular 6, AGM sélectionne la première adresse dans google autocomplete

après tant de temps passé à chercher la solution finalement trouvé,

si vous avez déjà mis en œuvre la suggestion d'adresse google(autocomplete) dans angulaire 2,4 5 & 6 et que vous voulez sélectionner la première suggestion par défaut, nous allons ici avec Exemple de travail,

nous devons créer un service séparément et nous devons l'abonner. J'ai donné l'exemple de travail ci-dessous,

Important: soyez patient pour regarder et changer les noms et tout cela va certainement fonctionner.

---

app.composant.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);

 }

}

---

lieu-prédiction.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.composant.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>

pour moi, il est travaillé, si vous faites face à un problème s'il Vous Plaît ajouter votre commentaire (ou envoyez-moi @ saravanava3@gmail.com), si je suis au courant de votre requête je vais répondre