Googleマップとangle2のスコープの問題？

Question

Angular 2で実行しているGoogleマップの実装を試してみました。Angularサービスが提供するマーカーの束を表示したいと思います。

「例外：TypeError：this.markersは[null]で定義されていません」これを手伝っていただければ幸いです。

おかげ フレッド

は、これはこれまでのところ、私のコンポーネントです：

ngOnInit(){ 
    this.getDecisionsGeo(); 
    this.initializeMap(); 
} 

のでinitializeMap方法は、結果の前に呼び出されます。

import { Component, OnInit, provide }  from 'angular2/core'; 
import { Router }       from 'angular2/router'; 

import { Marker }       from './marker'; 
import { MapService }      from './map.service'; 

@Component({ 
    selector: 'my-map', 
    providers: [MapService], 
    templateUrl: 'app/map/map.component.html', 
    styleUrls: ['app/map/map.component.css'], 
}) 

export class MapComponent implements OnInit { 
     markers: Marker[]; 
     errorMessage: string; 

    constructor(
     private _mapService: MapService 
     ) { } 

    getDecisionsGeo() { 
     this._mapService.getDecisionsGeo() 
          .subscribe(
           markers => this.markers = markers, 
           error => this.errorMessage = <any>error);      
    } 

    ngOnInit(){ 
     this.getDecisionsGeo(); 
     this.initializeMap(); 
    } 


    initializeMap() { 
     // Giving the map some options 
     var mapOptions = { 
      zoom: 13, 
      center: new google.maps.LatLng(51.2192,4.4029) 
     }; 

     // Creating the map 
     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 


     // Looping through all the entries from the markers data 
     for(var i = 0; i < this.markers.length; i++) { 

      // Current object 
      var obj = this.markers[i]; 

      // Adding a new marker for the object 
      var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(obj.lat,obj.lng), 
      map: map, 
      title: obj.poi.documents.meetitem_title_pop // this works, giving the marker a title with the correct title 
      }); 

      // Adding a new info window for the object 
      var clicker = addClicker(marker, obj.poi.documents.meetitem_title_pop); 


     } // end loop 


     // Adding a new click event listener for the object 
     function addClicker(marker, content) { 
      var infowindow; 
      google.maps.event.addListener(marker, 'click', function() { 

      if (infowindow) {infowindow.close();} 
      infowindow = new google.maps.InfoWindow({content: content}); 
      infowindow.open(map, marker); 

      }); 
     } 

    } 

} 

Answer 1

問題は、あなたが非同期的マーカーを読み込むことですHTTP要求のうちの1つが受信される。

私はあなたのコードをこのようにリファクタリングします：

ngOnInit(){ 
    this.getDecisionsGeo(); 
} 

getDecisionsGeo() { 
    this._mapService.getDecisionsGeo() 
       .subscribe(
       markers => { 
        this.markers = markers; 
        this.initializeMap(); 
       }, 
       error => this.errorMessage = <any>error);      
}