如何使用 ionic 4 动态添加带有谷歌位置的文本字段

Question

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

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： 当我删除 fro 循环时它可以工作，但是当我再次添加它时，它会给出上面的错误。 请问有什么建议吗？

我添加了一些图片来对问题有一个粗略的想法，第一张图片你看到我制作的第二张 UI 当尝试输入城市时 google places api 正在工作但当我单击按钮添加新city 生成了文本字段，但 google places api 不起作用，这就是问题所在。

Answer 1

您在模板代码中使用 *ngFor 指令，这意味着您不能使用 ViewChild 获取特定的离子输入组件（因为通过 *ngFor 您将获得其中的 n 个）。您需要采用 ViewChildren，捕获 autoStation 元素列表，然后确定您需要使用哪个元素：

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

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

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

更新： 由于您有多个输入元素（由于 *ngFor 复制），您需要遍历每个元素并在特定的“autoStation”上执行您的操作：

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

我刚刚在我的 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
            //});
        })
    })
  };

}