Угловой компонент Google Maps TypeError: Невозможно прочитать свойство 'nativeElement' из неопределенного - PullRequest
Новая
       32

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

0 голосов
/ 05 июня 2018

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

enter image description here

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

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>

1 Ответ

0 голосов
/ 05 июня 2018

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

сделайте ваш код следующим образом - 

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