Question

我正在使用Angular8在ngFor内设置Algolia Places输入。当我使用（更改）时，第二次在输入中书写时效果很好。这很好，但不是我想要的。

我认为函数和输入之间的链接不是在创建输入（逻辑）时自动建立的。我想要的是将输入与功能成功链接。我该怎么办？

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地方信息功能链接

2 个答案: