如何使用 ionic 4 动态添加带有 google 位置的文本字段
how to add a text field with google places dynamically using ionic 4
我想在我的项目中使用 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 地方 api 正在工作,但是当我单击添加新城市的按钮时,生成了文本字段,但是 google 位置 api 不起作用,这就是问题所在。
您在模板代码中使用了 *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
//});
})
})
};
}
我想在我的项目中使用 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 地方 api 正在工作,但是当我单击添加新城市的按钮时,生成了文本字段,但是 google 位置 api 不起作用,这就是问题所在。
您在模板代码中使用了 *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
//});
})
})
};
}