キャッチされない例外TypeError：</p> <p>「angular2：ヌル

Question

のプロパティ「EA」を読み取ることができません私は、次のpackage.jsonファイルで見つかった依存関係で、typescriptですとangular2-グーグルマップで

をangular2使用しています

Uncaught TypeError: Cannot read property 'ea' of null

：-Googleマップ "：『マップをナビゲートする際^ 0.12.0』

は、それはほとんど問題なく非常によく実行されているが、私はこの例外に直面しています

どのように解決するか？

Answer 1

投稿していないコードは本当に診断できません。しかし、私はエラーメッセージを多少解釈することができます。コードのどこかには、オブジェクトへの参照（objと呼ぶ）とそのプロパティ（a.k.a.属性またはフィールド）eaがあります。例えば、

x = obj.ea 

すると実行は、参照を行っているものは何でもステートメントになった、OBJはヌルました。ヌルオブジェクトはかなり退屈です。とりわけ、それらは特性を持たない。 :-)

エラーが発生した場所を見つけるためにスタックトレースを読んで、オブジェクトの値をトレースして、なぜそれがより有用な値を持つべきかをnullにする必要があります。

Answer 2

私の問題はまったく同じです。&をマウスでクリックしてドラッグすると、このエラーが発生します。マップ内またはマーカー上でのズームやクリック、ドラッグ/パンのみでは発生しません。 コードを投稿するのは大変なことではありません。なぜなら、Angular 2 Googleマップのサンプルは、私たち全員が利用できるようになり、何も起こらずに変更できるからです。もちろん、入力した値で可能な最もシンプルな設定をテストしていますが、それでもなお発生します。とにかくコードがあります。 テンプレート：

<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でテストされていません。