IONIC 3：无法读取未定义的属性“nativeElement”类型错误：无法读取未定义的属性“nativeElement”答案

【问题标题】：IONIC 3: Cannot read property 'nativeElement' of undefined TypeError: Cannot read property 'nativeElement' of undefinedIONIC 3：无法读取未定义的属性“nativeElement”类型错误：无法读取未定义的属性“nativeElement”
【发布时间】：2018-02-26 09:22:05
【问题描述】：

我正在学习 IONIC 3，现在我正在开发一个使用 Google Maps API 的应用程序。问题是我正在尝试执行我的应用程序，但是当它启动时，会出现以下消息：

inicio.html

Error: Uncaught (in promise): TypeError: Cannot read property 
'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined

这是产生问题的一段代码：

inicio.ts（只是代码的一部分）

loadMap(){

this.geolocation.getCurrentPosition().then((position)=>{

  let latLng = new google.maps.LatLng(position.coords.latitude,
                                      position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  this.map = new google.maps.Map(this.mapElement.nativeElement, 
  mapOptions);

  }, (err) => {
  console.log(err);
  });

}

inicio.ts（完整代码）

import { Component,ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

declare var google: any;

/**
* Generated class for the InicioPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more 
info on
* Ionic pages and navigation.
*/

@IonicPage()
@Component({
selector: 'page-inicio',
templateUrl: 'inicio.html',
})
export class InicioPage {

@ViewChild('map') mapElement: ElementRef;
map: any; //Google map manager.
coords : any = { lat:0, lng: 0 } 

constructor(
public navCtrl: NavController, 
public navParams: NavParams,
public platform: Platform,
public geolocation: Geolocation) {

  platform.ready().then(() => {
      //Platform ready. All plugins enabled.
  });
}

ionViewDidLoad() {
console.log('ionViewDidLoad InicioPage');
this.loadMap();
}

loadMap(){

this.geolocation.getCurrentPosition().then((position)=>{

  let latLng = new google.maps.LatLng(position.coords.latitude,
                                      position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

this.map = new google.maps.Map(this.mapElement.nativeElement, 
mapOptions);

}, (err) => {
  console.log(err);
});

}
}

inicio.html

<!--
Generated template for the InicioPage page.

See http://ionicframework.com/docs/components/#navigation for more 
info on
Ionic pages and navigation.
-->
<ion-header>

<ion-navbar>
<ion-title>Inicio</ion-title>
</ion-navbar>

</ion-header>


<ion-content padding>
<!--<h1> Esta es la página de inicio, aquí situaremos un mapa con un 
boton de añadir lugar.</h1>-->
<div id="map"></div>

</ion-content>

inicio.scss

page-inicio {

ion-content{
    .scroll{
        height: 100%;   
    }
    #map{
        width: 100%;
        height: 100%;
    }
}

}

感谢您的帮助！

【问题讨论】：

听起来像是 DI 错误，能否将类构造函数添加到您的问题中？另外，请添加mapElement属性的声明和初始化。
完成！。已添加完整代码。
我认为您需要将代码移动到类似 ngAfterViewInit 的位置，因为 @ViewChild('map') 可能在 ionViewDidLoad 生命周期挂钩中尚不可用。不过我不记得使用哪个钩子了。
我在 ngAfterViewInit 中放入了对 loadMap() 的调用。还是行不通。 :(
并且您的模板包含类似<div #map>的标签？

标签： javascript google-maps typescript geolocation ionic3

【解决方案1】：

在你的 HTML 中你需要改变

<div id="map"></div>

到

<div #map id="map"></div>

然后@ViewChild('map') mapElement: ElementRef; 将正确解析。

更多详情请见this。

【讨论】：

请修改您的答案并添加一些关于您的解决方案的上下文和您指向的场外资源的简要说明。另请参阅How to Answer。
LMAO，同样的事情也发生在我身上。我从 HTML 中删除了#map，然后我开始想知道为什么会出现这个错误。 @Daniel，您是否在学习 Josh Morony 教程？ joshmorony.com/…
如果有人对 elementRef 有新的解析，它来自 Angular 的核心：import { ElementRef } from '@angular/core';

【解决方案2】：

这已经晚了，但是对于那些在遵循 here 的 Josh 的教程后仍然有错误的人。我解决了我的错误，只是将 loadMap() 函数调用放在 ionViewDidLoad() 而不是 constructor()

【讨论】：