Angular 2 - 通過class屬性在視圖中顯示事件偵聽器函數的值

Question

我正在使用離子2 /角度2和谷歌地圖。

我上課了

    import {Page, Platform} from  'ionic-angular';
    import {Geolocation} from 'ionic-native';
    import {Http, Response} from '@angular/http';

    @Page({
        templateUrl: 'build/pages/mapPage/mapPage.html',
    })

    export class MapPage {

        date: String = new Date().toISOString();
        address: any = 'Pick a place';

        constructor(private platform: Platform, private http: Http) {
            this.platform = platform;
            this.initializeMap();
        }


        initializeMap() {
        let HTTPP = this.http;
        this.platform.ready().then(() => {
            var myLatLng = {};
            var image = 'custom/img/map-marker-small.png';

            Geolocation.getCurrentPosition().then(pos => {
                myLatLng = { lat: pos.coords.latitude, lng: pos.coords.longitude };                 
            })
                .then(() => {
                    var minZoomLevel = 17;

                    var map = new google.maps.Map(document.getElementById('map_canvas'), {
                        zoom: minZoomLevel,
                        center: myLatLng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });
                });

             var getAddress = function (lat, lng) {
                    let mapUrl = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + lng + '&key=XXXXXXXXX';  // URL to web API
                    let address = "";

                    return HTTPP.get(mapUrl)
                        .toPromise()
                        .then(data => {
                            let data2 = data.json().results;                                
                            data2[0]['address_components'].forEach(add => {
                                address += add.long_name + ", ";
                            });
                            return address;
                        });
                }

                marker.addListener('dragend', function (event) {
                    var lat = event.latLng.lat();
                    var lng = event.latLng.lng();

                    console.log("lat: " + lat + ", lng: " + lng);

                    getAddress(lat, lng)
                    .then(function(address){
                        console.log(address); //WORKS CORRECTLY
                        //but can't access `this` here. 
                        //this.address = address //THIS IS WHAT I WANT 
                        return address;
                    })

                });
           });
         }
      }

我想要完成的是獲取已拖動到坐標的標記的地址並將其顯示給前端的用戶

 <ion-navbar *navbar>
  <ion-title>
    Map Example
  </ion-title>
</ion-navbar>

<ion-content class="home">
  <div id="map_canvas" style="height: 60%"></div>
  <ion-item>
    <ion-label>Date</ion-label>
    <ion-datetime displayFormat="DDD MMM DD, h:mm A" pickerFormat="DDD DD MMM h mm A" [(ngModel)]="date"></ion-datetime>

  </ion-item>
  <ion-item>
   {{address}}
  </ion-item>
</ion-content>

拖動標記后，我已成功獲取坐標並成功獲取地址字符串。 但是this運算符在標記的dragend事件的事件監聽器函數中不可用。

我如何將this.address等同於我在事件監聽器中的地址？

我試圖通過let self = this;來this做出一般性的反思let self = this; 然后在函數內使用self.address = address ，希望它能反映在視圖中。 但它不起作用。

我想要做的就是當用戶將標記拖動到新位置時在前端顯示地址。

任何幫助將不勝感激!!

Answer 1

更改

function (event) {

至

(event) => {

保留的范圍this

另請參見https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

丟失上下文有兩個地方： dragend事件處理程序， then回調函數。 對它們使用箭頭函數，這將保留詞法范圍：

marker.addListener('dragend', event => {

  var lat = event.latLng.lat();
  var lng = event.latLng.lng();

  getAddress(lat, lng)
    .then(address => this.address = address);

});