how to add a text field with google places dynamically using ionic 4

问题

I'm tying to use google-place-api autoComplete in my project, but it gives me an error:

TypeError: Cannot read property 'getInputElement' of undefined

.html

<section
          [formGroupName]="i"
          *ngFor="let tech of form.controls.stations.controls; let i = index">
          <ion-item-group>
              <ion-item-divider color="light">Station #{{ i + 1 }}</ion-item-divider>

             <ion-item>
                <ion-label position="floating">Technology name:</ion-label>
                <ion-input
                   #autoStation
                   type="text"
                   maxlength="50"
                   formControlName="name"></ion-input>
             </ion-item>
           <!-- Allow generated input field to be removed -->

             <ion-button
             (click)="removeInputField(i)"
             *ngIf="form.controls.technologies.length > 1"
              class="ion-no-padding ion-float-right" shape="round" fill="clear">
                <ion-icon slot="start" name="close"></ion-icon>Remove</ion-button>


          </ion-item-group>
       </section>
       <div>
           <!-- Allow new input field to be generated/added -->

    <ion-button
    (click)="addNewInputField()"

     class="ion-no-padding ion-float-left" shape="round" fill="clear">
       <ion-icon slot="start" name="add"></ion-icon> Add a new technology</ion-button>
       </div>

.ts

@ViewChild('autoStation', {static: true}) autoStation: any;
  ngAfterViewInit(): void {
    this.autoStation.getInputElement().then((input:HTMLInputElement)=>{
        var autocompl = new google.maps.places.Autocomplete(input, {

          //somee code
     });

    }
   });
     addNewInputField() : void {
      const control =  this.form.controls.technologies as FormArray;


       control.push(this.initTechnologyFields());
       }

  removeInputField(i : number) : void {
    const control =  this.form.controls.technologies as FormArray;
    control.removeAt(i);
   }

PS: when I remove the fro loop it works, but when I add it again it gives the error above. any suggestions please ?

I added some pictures to have a raugh idea about the problem, the first pic you see the UI which I made the second one When when Tried to typing a city google places api is working but when I click the button to add new city the text field is generated but the google places api doesnt work, this is the problem.

回答1:

You are using *ngFor directive in your template code and that means you can't use ViewChild to get particular ion-input component (since via *ngFor you will get n-amount of those). You need to adopt ViewChildren, capture the list of autoStation elements, then figure which one you need to work with:

import { ViewChildren, QueryList } from '@angular/core';

@ViewChildren('autoStation') autoStationList:QueryList<any>;

ngAfterViewInit(){
    console.log(this.autoStationList);
}

Updated: Since you have several input elements (due to *ngFor replication), you need to run through each element and perform your action on particular 'autoStation':

ngAfterViewInit() {
    this.autoStationList.forEach( autoStation => {
        autoStation.getInputElement().then((input:HTMLInputElement)=>{
            let autocompl = new google.maps.places.Autocomplete(input, {
              //some code
            });
        }
    })
};

I just tried this example in my VSCODE:

template:

<ion-header>
    <ion-toolbar>
        <ion-title>
            query list example
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-list lines="none">
        <section *ngFor="let tech of list; let i = index">
            <ion-item-group>
                <ion-item-divider color="light">Station #{{ i + 1 }}</ion-item-divider>
                <ion-item>
                    <ion-label position="floating">Technology name:</ion-label>
                    <ion-input #autoStation type="text" maxlength="50"></ion-input>
                </ion-item>
            </ion-item-group>
        </section>
    </ion-list>
</ion-content>

ts:

import { Component, ViewChildren, QueryList } from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  @ViewChildren('autoStation') autoStationList:QueryList<any>;
  list = [];
  constructor() {
    this.list = [0,1,2,3,4,5]
  }

  ngAfterViewInit() {
    this.autoStationList.forEach( autoStation => {
        autoStation.getInputElement().then((input:HTMLInputElement) => {
            console.log(input)
            //let autocompl = new google.maps.places.Autocomplete(input, {
              //some code
            //});
        })
    })
  };

}

来源：https://stackoverflow.com/questions/59234719/how-to-add-a-text-field-with-google-places-dynamically-using-ionic-4