Question

我只是试图访问我的Angular 4模板中的一个元素来放置一个谷歌地图，但我不断得到一个＆＃34;无法读取未定义的属性本机元素＆＃34;错误。我已经看到其他人提出类似的问题，但我到目前为止所做的任何事情都没有奏效。

尝试访问ngOnInit和ngAfterViewInit中的元素时出现同样的错误。我也尝试使用document.getElementById，这也给我一个空错误。我知道它不是谷歌地图错误，因为我在尝试访问谷歌地图以外的元素时收到错误。

我在home.component.ts中有以下内容（这是在特定的主组件内，而不是在主app模块中）：

import { NgModule, Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { } from '@types/googlemaps';

@Component({
   selector: 'home-page',
   templateUrl: './home.html'
})

export class HomeComponent implements OnInit, AfterViewInit {
     @ViewChild('gmap') el:ElementRef;
     map: google.maps.Map;

     public ngOnInit() {
        // other component initialization code here
     }

     public ngAfterViewInit () {
        let mapProp = {
           center: new google.maps.LatLng(18.5793, 73.8143),
           zoom: 15,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         this.map = new google.maps.Map(this.el.nativeElement, mapProp);

      // this alone gives me the same error
      setTimeout(() => {
          console.log(this.el.nativeElement);
       }, 0);
    }
}

在组件模板中 - home.component.html：

<div class="row">
    <div class="col-md-12">
        <div class="text-center">
            <div #gmap style="width:100%;height:400px"></div>
        </div>
    </div>
</div>

Answer 1

将类型更改为任何

@ViewChild('gmap') el: any;

Answer 2

我在页面上有一个加载器，直到所有数据都在页面上返回：

public getData() {
    this.loading = true;
    this.homeService.getData().subscribe(response => {
        this.resort = response;
        this.loading = false;
        this.error = false;
        this.getMap();
    }, error => {
        this.loading = false;
        this.error = true;
    });
}

因此，即使ngAfterViewInit正在运行，数据库中的数据仍然没有在函数运行时返回，这就是为什么它无法找到元素，因为实际数据是隐藏的一个* ngIf，直到this.loading为假。所以要纠正我只是在返回数据后调用getMap（），而不是在AfterViewInit函数中调用。

然后我必须在setTimeout中包装getMap函数，以确保* ngIf在我尝试访问元素之前加载内容数据：

public getMap() {
    setTimeout(() => {
        // accessing element here
    });
 }

Answer 3

也许是因为HomeComponent没有@Component注释？

首先，如果没有@Component，HomeComponent就无法知道home.component.html是它的模板，如果它不知道它的模板，它就不知道#gmap是一个视图孩子。仅通过命名约定或文件位置将模板匹配到类是不够的。

Answer 4

您的组件的templateUrl说'./home.html'，但您还提到了文件名home.component.html在＆＃34;组件模板内 - home.component.html＆＃34;。也许那是你的问题？

Angular 4无法使用ViewChild

4 个答案: