コールバック関数内で角度2スコープを取得できません

Question

コールバック関数内で配列オブジェクトを更新する必要があります。次の行を使用しましたが、値は角度変数ではなくコールバックループのスコープに設定されます。ビューが更新されていません。（deviceval）値は、コールバック内で印刷する場合に変更されますが、値の外はまだ古い値です。

export class DashboardComponent implements OnInit { 
    hideTable: boolean = true; 
    public deviceVal:any; 
    constructor(private ref: ChangeDetectorRef) {} 

    ngOnInit() { 
    this.deviceVal = deviceData; 
    console.log(this.deviceVal); 
    var container = $('.map-canvas'); 
    var options = { 
    center: new google.maps.LatLng(41.676258, -99.683199), 
    zoom: 4, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    gmap = new google.maps.Map(container[0], options); 
    this.drawChart(deviceData); 
    this.plotMarkers(); 
    } 

    plotMarkers(){ 
    $.each(deviceData, function(key, val) { 
     var controller=this; 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(parseInt(val.lat), parseInt(val.lon)), 
     map: gmap, 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
     this.deviceVal = val; 
     }); 
     markerCache.push(marker); 
    }) 
    } 
} 

Answer 1

問題はここにある：

$.each(deviceData, function(key, val) { 
    var controller=this; 
    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(parseInt(val.lat), parseInt(val.lon)), 
    map: gmap, 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    this.deviceVal = val; 
    }); 
    markerCache.push(marker); 
}) 

あなたはコールバック関数として、 'この' の値が変更された機能（）を使用する場合。あなたはこれについてここでよく読んでください。

plotMarkers(){ 
    $.each(deviceData, (key, val) => { 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(parseInt(val.lat), parseInt(val.lon)), 
     map: gmap, 
     }); 
     google.maps.event.addListener(marker, 'click',() => { 
     this.deviceVal = val; 
     }); 
    }) 
    } 

しかし、あなたは次のように、他の多くの問題があります：

あなたは、この使用して、矢印の機能を修正することができますが（正直に言うと、あなたはNG2でjQueryのを避けなければならないのjQueryを使用する必要はありませんapp）、 'gmap'変数は定義されていません（たとえば 'deviceVal'で行ったようにクラスのプロパティとして設定できます）。 'markerCache'も定義されていません。drawChartメソッドはありません。 deviceData 'はplotMarkers（）内で定義されていません。

Answer 2

Iは

var controller; 

ようエクスポートコンポーネントの前にグローバル変数を宣言し、それを解決しngoninitでそれを初期化（）、

controller = this; 

とのaddListenerにコントローラを通過し、

google.maps.event.addListener(marker, 'click',() => { 
          controller.deviceVal=[]; 
          controller.deviceVal.push(val); 
          //console.log(controller.deviceVal+"end....................................") 
          });