未捕获的TypeError：无法读取属性＆＃39; ea＆＃39;为null

Question

我正在使用angular2与typescript和angular2-google-maps，

以下是package.json文件中的依赖项：

＆＃34; angular2-google-maps＆＃34;：＆＃34; ^ 0.12.0＆＃34;

它几乎没有问题，但是我在浏览地图时遇到了这个异常：

  

未捕获的TypeError：无法读取属性＆＃39; ea＆＃39;为null

知道怎么解决吗？

Answer 1

我们无法真正诊断您尚未发布的代码。但是，我可以在某种程度上解释错误消息。在代码中的某个地方，有一个对象的引用（让我们称之为 obj ）及其属性（a.k.a.属性或字段） ea 。例如，

x = obj.ea

当执行任何语句进行引用时， obj 为 null 。空物体很无聊;除其他外，他们没有财产。 ： - ）

您需要读取堆栈跟踪以查找错误发生的位置，跟踪对象的值，并在它应具有更有用的值时找出它 null 的原因。

Answer 2

我的问题完全一样，当我点击并将鼠标悬停在地图上并开始拖动它时，我才会收到此错误。地图内部或标记内的缩放或点击，只有拖动/平移，不会发生这种情况。 发布代码并不是什么大问题，因为它是我们所有人都可以使用的Angular 2 Google Map样本，并且不会改变它发生的任何变化。当然，我已经使用输入值测试了最简单的配置，但仍然会发生。无论如何，这是代码。 模板：

<h1>Sample Angular 2 Google Maps App</h1>
<div class="container">
  <div class="row">
    <div class="col-md-5">
      <section widget class="widget">
        <p>Vivamus hendrerit arcu sed erat molestie vehicula....</p>
      </section>
    </div>
    <div class="col-md-7">
      <div id="my-google-map">
        <sebm-google-map 
          [latitude]="lat"
          [longitude]="lng"
          [zoom]="zoom"
          [disableDefaultUI]="false"
          [zoomControl]="true">
          <sebm-google-map-marker 
            *ngFor="let m of markers; let i = index"
            (markerClick)="clickedMarker(m.label, i)"
            [latitude]="m.lat"
            [longitude]="m.lng"
            [label]="m.label"
            [markerDraggable]="false">
          </sebm-google-map-marker>
        </sebm-google-map>
      </div>
    </div>
  </div>
</div>

这是组件：

import {Component, OnInit, AfterContentInit} from '@angular/core';
import {ElementRef, ViewEncapsulation} from '@angular/core';
import {GOOGLE_MAPS_DIRECTIVES,
        GOOGLE_MAPS_PROVIDERS,
        provideLazyMapsAPILoaderConfig,
        GoogleMapsAPIWrapper} from 'angular2-google-maps/core';

// just an interface for type safety.
interface Marker {
  lat: number;
  lng: number;
  label?: string;
}
interface Bounds {
  sw: Marker;
  ne: Marker;
}

@Component({
  selector: 'myapp',
  template: require('./dashboard.html'),
  styles: ['sebm-google-map { height: 100% }', '#my-google-map { height: 600px;}'],
  directives: [
    GOOGLE_MAPS_DIRECTIVES
  ],
  encapsulation: ViewEncapsulation.None,
  providers: [ GOOGLE_MAPS_PROVIDERS, provideLazyMapsAPILoaderConfig( {
    apiKey: '.... key ....'
  })],

})

export class Dashboard implements OnInit, AfterContentInit {
  // GoogleMaps related
  lat: number = 25.906032;
  lng: number = -80.255876;
  zoom: number = 12;
  latMin: number = 0;
  latMax: number = 0;
  lngMin: number = 0;
  lngMax: number = 0;
  $el: any;
  $mapDiv: any;
  mapPixelDimensions: any;
  bounds: Bounds;
  markers: Marker[] = [
    {
      lat: 25.801553,
      lng: -80.247964,
      label: '78'
    },{
      lat: 25.810098,
      lng: -80.240513,
      label: '66'
    },{
      lat: 25.822982,
      lng: -80.215868,
      label: '59'
    }
  ];

  constructor (
    el: ElementRef) {
    this.$el = jQuery(el.nativeElement);
    this.$mapDiv = this.$el.find('#my-google-map');
  }

  ngOnInit() {
    this.recalculateMapPosition();
  }

  ngAfterContentInit() {
    this.recalculateMapPosition();
  }

  recalculateMapPosition() {
    this.mapPixelDimensions = {
      height: this.$mapDiv.height(),
      width: this.$mapDiv.width()
    };
    for (var coord of this.markers) {
      if ( this.latMin == 0 ) { this.latMin = this.markers[0].lat; }
      if ( this.lngMax == 0 ) { this.lngMax = this.markers[0].lng; }
      // Test for minimum and maximum latitude
      if ( coord.lat < this.latMin ) { this.latMin = coord.lat; }
      if ( coord.lat > this.latMax ) { this.latMax = coord.lat; }
      // same for longitude
      if ( coord.lng < this.lngMin ) { this.lngMin = coord.lng; }
      if ( coord.lng > this.lngMax ) { this.lngMax = coord.lng; }
    }
    this.lat = this.latMin + Math.abs(this.latMax - this.latMin);
    this.lng = this.lngMin + Math.abs(this.lngMax - this.lngMin);
    this.bounds = {
      ne: {lat: this.latMax, lng: this.lngMax},
      sw: {lat: this.latMin, lng: this.lngMin}
    };
    this.zoom = this.getZoom(this.bounds, this.mapPixelDimensions.width);
    console.log('zoom: ', this.zoom);
  }

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`);
  }

  getZoom(bounds, dimm) {
    var GLOBE_WIDTH = 256; // a constant in Google's map projection
    var west = bounds.sw.lng;
    var east = bounds.ne.lng;
    var angle = east - west;
    if (angle < 0) {
      angle += 360;
    }
    var zoom = Math.round(Math.log(dimm * 360 / angle / GLOBE_WIDTH) / Math.LN2);
    return zoom - 2;
  }

}

我用firefox 49.0.2测试了它并没有发生。 它发生在54.0.2840.71（64位） 没有在Safari上测试过。