javascript - Angular Google map 组件 TypeError : Cannot read property 'nativeElement' of undefined

Question

所以我正在尝试为 AGM 创建自动填充输入，到目前为止一切顺利，但是当我将组件( app-agm-input )放入我的 app.component.html 中时，我收到以下错误:

这是我的组件的样子:

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 key 。

这就是我的组件的 html 文件的样子:

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


Answer 1

您引用了错误的变量名称

你的代码是这样的 -

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