动态创建Google Maps地址自动完成

Question

这是我的用例：

我想让用户通过按钮创建动态地址输入。我希望那些动态创建的地址输入以使Google Maps AutoComplete具有。我设法创建了一个自动完成地址输入。尽管输入HTML标签已经在DOM中。我正在为此项目和 @Angular/Google-Maps NPM软件包使用Angular 11。

这是我到目前为止正在做的事情，我似乎无法使事情起作用。输入字段是正确创建和删除的，但似乎没有应用自动完成。

任何帮助将不胜感激:)

 ngAfterViewInit(): void {
    this.addAddress();
  }

  public addAddress(): void {
    const newInput = document.createElement('input');
    newInput.id = `${this.inputCounter}`;
    this.inputCounter++;
    this.HTMLInputElementArray.push(newInput);
    for (const inputText of this.HTMLInputElementArray) {
      const autocomplete = new google.maps.places.Autocomplete(inputText, {
        componentRestrictions: { country: 'CA' },
        types: ['geocode'],
      });
      google.maps.event.addListener(autocomplete, 'place_changed', () => {
        const place = autocomplete.getPlace();
        this.invokeEvent(place);
      });
    }
  }

  public invokeEvent(place: object): void {
    this.setAddress.emit(place);
  }

  public removeAddress(): void {
    this.HTMLInputElementArray.pop();
    if (this.inputCounter > 0) {
      this.inputCounter--;
    }
  }

<div>
  <button style="margin-top: 10px" (click)="addAddress()">Add address</button>
  <button style="margin-top: 10px" (click)="removeAddress()">
    Remove address
  </button>
</div>

<div *ngFor="let input of HTMLInputElementArray; let i = index">
  <input type="text" [id]="input.id" class="query" />
</div>