Угловой компонент Google Maps TypeError: невозможно прочитать свойство nativeElement из undefined

Итак, я пытаюсь создать ввод для автозаполнения для ГОСА, пока все хорошо, но когда я помещаю компонент (app-agm-input) в свой app.component.html, я получаю следующую ошибку:

Угловой компонент Google Maps TypeError: невозможно прочитать свойство nativeElement из undefined

Вот как выглядит мой компонент:

import {
    Component,
    OnInit,
    ViewChild,
    ElementRef,
    NgZone,
    Input
} from "@angular/core";
import { MapsAPILoader } from "@agm/core";
import {} from "@types/googlemaps";

@Component({
    selector: "app-agm-input",
    templateUrl: "./agm-input.component.html",
    styles: []
})
export class AgmInputComponent implements OnInit {
    @ViewChild("agmInput") public searchElement: ElementRef;

    @Input() placeholder: string;

    constructor(private mapsAPILoader: MapsAPILoader, private ngZone: NgZone) {}

    ngOnInit() {
        this.mapsAPILoader.load().then(() => {
            let autocomplete = new google.maps.places.Autocomplete(
            this.searchElement.nativeElement,
            { types: ["address"] }
        );

        autocomplete.addListener("place_changed", () => {
            this.ngZone.run(() => {
                let place: google.maps.places.PlaceResult = autocomplete.getPlace();

                if (
                    place.geometry === undefined ||
                    place.geometry === null
                ) {
                    return;
                }
            });
        });
    });
}
}

Вот как выглядит мой модуль:

import { NgModule } from "@angular/core";
import { AgmInputComponent } from "./agm-input.component";
import { SharedModule } from "../../shared.module";
import { AgmCoreModule } from "@agm/core";

@NgModule({
    imports: [
        SharedModule,
        AgmCoreModule.forRoot({
            apiKey: "**key**",
            libraries: ["places"]
        })
    ],
    declarations: [AgmInputComponent],
    exports: [AgmInputComponent]
})
export class AgmInputModule {}

ПРИМЕЧАНИЕ Я удалил ключ API для ознакомления.

А вот так выглядит html-файл моего компонента:

<input class = "input" type = "search" placeholder = "{{placeholder}}" autocorrect = "off" autocapitalize = "off" spellcheck = "off" #agmSearch>

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
2 349
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы имеете в виду неправильное имя переменной

сделайте свой код вот так -

    @ViewChild("agmSearch") public searchElement: ElementRef;

Да, в больших проектах я всегда пренебрегаю мелочами. Спасибо тебе за это! :)

Tanasos 05.06.2018 09:23

Другие вопросы по теме