遺漏的類型錯誤：無法讀取空的特性「EA」

Question

我使用angular2以打字稿及angular2，谷歌地圖，

以下是在的package.json文件中找到的相關性：

「angular2 -Google-地圖「：‘^ 0.12.0’

它幾乎運行得很好沒有問題，但我面對這個例外通過地圖導航時：

Uncaught TypeError: Cannot read property 'ea' of null

任何想法如何解決它？

Answer 1

我們無法真正診斷您未發佈的代碼。但是，我可以在某種程度上解釋錯誤消息。在代碼內某處，有一個對象的引用（我們稱之爲obj）及其屬性（又名屬性或字段）ea。例如，

x = obj.ea 

執行當得任何聲明作出參考，OBJ是空。空物體很無聊;除其他外，他們沒有財產。 :-)

您需要通過讀取堆棧跟蹤來找到發生錯誤的位置，跟蹤對象的值，並找出爲什麼它應該有更有用的值時爲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上測試。