Google Place API 不适用于使用 Ionic 4 生成的文本字段

Question

下面的代码用于动态添加文本字段，这个文本字段是一个goole places自动完成列表，我的问题是goole places api仅适用于第一个字段并且不起作用. 对于生成的字段

。.html

<section
[formGroupName]="i"
*ngFor="let tech of form.controls.stations.controls; let i = index">

<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.autoCompleteStation.forEach( autoStation => {
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);
}

[！在此处输入图像描述][1]][1]

[！在此处输入图像描述][2]][2]

我添加了一些图片来大致了解这个问题，第一张图片你看到的是我制作的 UI 当尝试输入城市谷歌地方 api 正在工作，但当我单击按钮添加新城市时，文本字段已生成，但谷歌地方 api 不起作用， 这就是问题所在。

Answer 1

以下是我认为您的代码中正在发生的事情：

1. 放置 API 适用于通过 *ngFor 创建的组件模板中已有的离子输入的原因很简单 - 在组件的 ngAfterViewInit 生命周期中，您有一个跨所有这些离子输入运行的方法，获取它们的本机输入元素并为每个元素初始化 Places API。

2. 当您使用按钮添加新的离子输入时 - 没有什么可以帮助初始化那些新添加到 DOM 输入的地方 API。

要修复 #2，您需要确保这种新添加到 DOM 的离子输入能够初始化 API。

如果您按照我之前问题的回答进行操作，那么您使用的是ViewChildren和QueryList，根据 Angular.io，它们用于：

。从视图 DOM 中获取元素或指令的查询列表。任何 添加、删除或移动子元素时，查询列表将 更新，查询列表的可观察更改将发出 新价值。

如果是这样，这意味着在您的代码中您有：

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

每次您添加另一个带有 #autostation 标识符的离子输入时，此自动站列表都会更新。

这意味着您所需要的只是获取此 QueryList 的最后一个子项并为其初始化 Places API。您可以使用 QueryList 的 changes(( 方法执行此操作，您可以订阅该方法，并且每次列表更改时 - 获取其"最后一个"元素，提取输入并初始化位置 API：

ngAfterViewInit(): void {
// here you initialize all ion-input's native inputs that exist in DOM at component view initialization stage:
this.autoCompleteStation.forEach( autoStation => {
autoStation.getInputElement().then(( input: HTMLInputElement) => {
let autocompl = new google.maps.places.Autocomplete(input, {
//some code
})
});
// here you subscribe to changes for the list:
this.autoStationList.changes.subscribe(list => {
// here we need to use "last" property of the list:
list.last.getInputElement().then(( input: HTMLInputElement) => {
var autocompl = new google.maps.places.Autocomplete(input, {
//somee code
})
})
}); 

}