ngFor，将输入链接到 Aloglia Places 函数

Question

我正在使用 Angular8 在 ngFor 中设置 Algolia Places 输入。当我使用 (change) 时，它在我第二次写入输入时工作正常。这很好，但不是我想要的。

我认为函数和输入之间的 link 不是在创建输入（逻辑）时自动生成的。我想要的是成功地 link 使用函数输入。我应该怎么做？

HTML部分：

<ng-container *ngFor="let place of places; let i = index;">
<input id="{{ 'inputaddress' + i}}" (change)="addressSearchIndex(i)" type="text" class="form-control" />
</ng-container>

Component.ts 部分：

addressSearchIndex(index) {
        this.placesAutocompleteAddress = placesAlgolia({
            appId: <ID>,
            apiKey: <Key>,
            container: document.querySelector('#inputaddress'+index),
            templates: {
                value: function(suggestion) {
                    return suggestion.name;
                }
            }
        }).configure({
            type: 'address'
        });
        this.placesAutocompleteAddress.on('change', function resultSelected(e) {
            this.lat = e.suggestion.latlng["lat"];
            this.lng = e.suggestion.latlng["lng"];
        });
    }

Answer 1

尝试按键或按键事件而不是更改

Answer 2

抱歉回复晚了，谢谢你给我的时间。

在向 Algolia 支持提出请求后（非常感谢他们），他们解决了我的问题。那么在这里，如何解决它：

home.component.html :

<app-places type="address" (onChange)="onSuggestion($event)" (onClear)="onClear($event)"></app-places>

place.component.ts :

import {
  AfterViewInit,
  Component,
  EventEmitter,
  Input,
  OnDestroy,
  OnChanges,
  Output,
  SimpleChanges,
  ViewChild
} from "@angular/core";
import * as places from "./places.min.js";

@Component({
  selector: "app-places",
  template: `
   <input #input class="form-control" type="search" />
  `
})
export class PlacesComponent implements AfterViewInit, OnDestroy, OnChanges {
  private instance = null;

  @ViewChild("input", {static: false}) input;
  @Output() onChange? = new EventEmitter();
  @Output() onClear? = new EventEmitter();

  @Input() type: string;

  ngAfterViewInit() {
    this.instance = places({
      appId: <ID>,
      apiKey: <KEY>,
      container: this.input.nativeElement,
      type: this.type
    });
    this.instance.on("change", e => {
      this.onChange.emit(e);
    });

    this.instance.on("clear", e => {
       this.onClear.emit(e);
     });
  }
  ngOnChanges(changes: SimpleChanges) {
    if (changes.type && this.instance) {
      this.instance.configure({
        type: changes.type.currentValue
      });
    }
  }
  ngOnDestroy() {
    this.instance.removeAllListeners("change");
    this.instance.removeAllListeners("clear");
    this.instance.destroy();
  }
}

再次感谢快速友好的 Algolia 支持。

ngFor，将输入链接到 Aloglia Places 函数

ngFor, linking input with Aloglia Places function

angular

typescript

ngfor

algolia