Angular 10 |阿尔及利亚 | Algolia Places：'container' 必须指向 <input> 元素

Question

我正在尝试以 angular 的方式实现 algolia。

我已经用 npm 安装了 places.js。

相关部分如下：

@ViewChild("input") private input;
private instance = null;

ngAfterViewInit() {
    console.log(this.input);
    this.instance = places({
      appId: this.dataService.ALGO_APPLICATION_ID,
      apiKey: this.dataService.ALGO_KEY,
      container: this.input,
      type: 'city'
    });
  }

它告诉我容器必须是一个输入元素，但是当我 console.log(this.input) 我看到一个输入元素时：

我尽量保持简短。如果需要更多代码，请在评论中告诉我。

input 来自 html:

<input #input id="algoliaInput" type="search" placeholder="Where are we going?">

Answer 1

private input 不是您在日志中看到的 HTMLElement。

它包含一个html元素，但它实际上是一个ElementRef对象。因此，将您的代码更改为以下内容即可。

import { ElementRef } from '@angular/core';

....

@ViewChild("input") private input: ElementRef<HTMLInputElement>;
private instance = null;

ngAfterViewInit() {
    console.log(this.input);
    this.instance = places({
      appId: this.dataService.ALGO_APPLICATION_ID,
      apiKey: this.dataService.ALGO_KEY,
      container: this.input.nativeElement, // nativeElement is the real HtmlElement.
      type: 'city'
    });
}

Angular 10 |阿尔及利亚 | Algolia Places：'container' 必须指向 <input> 元素

Angular 10 | Algolia | Algolia Places: 'container' must point to an <input> element

typescript

algolia

angular