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

问题描述

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

TypeError: 无法读取未定义的属性getInputElement"

.html

<ion-item-group><ion-item-divider color="light">Station #{{ i + 1 }}</ion-item-divider><离子项目><ion-label position="floating">技术名称:</ion-label><离子输入#汽车站类型=文本"最大长度=50"formControlName="name"></ion-input></ion-item><!-- 允许删除生成的输入字段--><离子按钮(点击)="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>移除</ion-button></ion-item-group></节><div><!-- 允许生成/添加新的输入字段--><离子按钮(点击)="addNewInputField()"class="ion-no-padding ion-float-left" shape="round" fill="clear"><ion-icon slot="start" name="add"></ion-icon>添加新技术</ion-button>

.ts

@ViewChild('autoStation', {static: true}) autoStation: any;ngAfterViewInit(): 无效 {this.autoStation.getInputElement().then((input:HTMLInputElement)=>{var autocompl = new google.maps.places.Autocomplete(input, {//一些代码});}});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);}

附注:当我删除 fro 循环时，它可以工作，但是当我再次添加它时，它会出现上述错误.请问有什么建议吗?

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

解决方案

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

import { ViewChildren, QueryList } from '@angular/core';@ViewChildren('autoStation') autoStationList:QueryList;ngAfterViewInit(){console.log(this.autoStationList);}

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

ngAfterViewInit() {this.autoStationList.forEach( autoStation => {autoStation.getInputElement().then((input:HTMLInputElement)=>{让 autocompl = new google.maps.places.Autocomplete(input, {//一些代码});}})};

我刚刚在我的 VSCODE 中尝试了这个例子:

模板:

<离子工具栏><离子标题>查询列表示例</ion-title></ion-toolbar></ion-header><离子含量><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-label position="floating">技术名称:</ion-label><ion-input #autoStation type="text" maxlength="50"></ion-input></ion-item></ion-item-group></节></ion-list></离子含量>

ts:

import { Component, ViewChildren, QueryList } from '@angular/core';@成分({选择器:'app-tab1'，templateUrl: 'tab1.page.html',styleUrls: ['tab1.page.scss']})导出类 Tab1Page {@ViewChildren('autoStation') autoStationList:QueryList;列表 = [];构造函数(){this.list = [0,1,2,3,4,5]}ngAfterViewInit() {this.autoStationList.forEach( autoStation => {autoStation.getInputElement().then((input:HTMLInputElement) => {控制台日志(输入)//let autocompl = new google.maps.places.Autocomplete(input, {//一些代码//});})})};}

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.

解决方案

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

}

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