Uncaught Typeerror: kann Eigenschaft 'ea' von null

Question

Ich verwende angular2 mit Typoskript und angular2-google-maps,

Das Folgende ist die Abhängigkeit in der package.json Datei gefunden lesen:

„angular2 -Google-Karten ": "^ 0.12.0"

Es läuft fast ganz gut ohne Problem, aber ich bin vor, diese Ausnahme, wenn sie durch die Karte navigieren:

Uncaught TypeError: Cannot read property 'ea' of null

Jede Idee, wie es zu lösen?

Answer 1

Wir können nicht wirklich Code diagnostizieren Sie haben nicht geschrieben. Allerdings kann ich die Fehlermeldung etwas interpretieren. Irgendwo innerhalb des Codes gibt es einen Verweis auf ein Objekt (nennen wir es obj) und sein Eigentum (auch bekannt als Attribut oder Feld) ea. Zum Beispiel

x = obj.ea 

Wenn die Ausführung bekam, was auch immer Anweisung, um die Referenz macht, obj war null. Null Objekte sind ziemlich langweilig; unter anderem haben sie keine Eigenschaften. :-)

Sie müssen den Stack-Trace lesen, um herauszufinden, wo der Fehler aufgetreten ist, den Wert des Objekts verfolgen und herausfinden, warum null ist, wenn es einen nützlicheren Wert haben sollte.

Answer 2

Mein Problem ist genau das gleiche und ich nur diese Fehlermeldung erhalten, wenn ich auf & die Maus über die Karte halten und starten Sie ihn ziehen. Es passiert nicht mit dem Zoom oder Klicks innerhalb der Karte oder auf den Markierungen, nur die Ziehen/Schwenken. Es ist keine große Sache, den Code zu schreiben, da es sich um eine Angular 2 Google Map Probe zur Verfügung, um alle von uns ist und ohne etwas zu ändern es passiert. Natürlich habe ich die einfachste Konfiguration mit eingegebenen Werten getestet und es passiert immer noch. Hier ist der Code sowieso. Die Vorlage:

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

Und hier ist die Komponente:

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; 
    } 

} 

ich es mit Firefox 49.0.2 getestet und es ist nicht geschehen. Es geschah mit 54.0.2840.71 (64-Bit) nicht auf Safari getestet.