角度10 |阿尔及利亚| Algolia Places：“容器”必须指向<input>元素

问题描述

我正在尝试以角度的方式实施阿尔戈利亚。

我已经用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?">

解决方法

正如您在日志中看到的那样，

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'
    });
}