如何使用Ionic 4动态添加带有Google Places的文本字段 [英] how to add a text field with google places dynamically using ionic 4

问题描述

我想在我的项目中使用google-place-api autoComplete，但这给了我一个错误:

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: 当我删除循环时，它可以工作，但是当我再次添加它时，它给出了上面的错误. 有什么建议吗?

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

我添加了一些图片来说明这个问题，当您尝试输入城市google place api时，当我单击按钮添加新图片时，您看到的第一张图片是我制作的第二张UI.城市，生成了文本字段，但Google Places api不起作用，这就是问题所在.

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.

推荐答案

您正在模板代码中使用* ngFor指令，这意味着您无法使用ViewChild来获取特定的离子输入组分(因为通过* ngFor您将得到其中的n个).您需要采用ViewChildren，捕获autoStation元素的列表，然后确定需要使用的元素:

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);
}

已更新: 由于您有多个输入元素(由于* ngFor复制)，因此您需要遍历每个元素并在特定的"autoStation"上执行操作:

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
            });
        }
    })
};

我刚刚在VSCODE中尝试了此示例:

I just tried this example in my VSCODE:

模板:

<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
            //});
        })
    })
  };

}

这篇关于如何使用Ionic 4动态添加带有Google Places的文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！