Angular 2 - 通过类属性在视图中显示事件监听器函数的值

Question

我正在使用Ionic 2 / Angular 2和Google地图。

我有一个类。

    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>

当拖动标记时，我成功地获取了坐标并成功地获取了地址字符串。但是，在标记的dragend 事件的事件监听器函数中，this 运算符不可用。

如何将 this.address 等同于我在事件监听器内部获得的地址？

我尝试通过执行 let self = this; 并在函数内部使用 self.address = address 的通用引用，希望它会反映在视图中。但这没起作用。

我想做的就是在用户将标记拖到新位置时在前端显示地址。

任何帮助都将不胜感激，谢谢！

- Raymond Ativie

Answer 1

更改

function (event) {

为了

(event) => {

保留 this 的作用域。

另请参阅 https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

- Günter Zöchbauer

---

谢谢 :) 我能够在函数内部访问this。但是似乎在执行this.address = address后无法在视图中显示。 - Raymond Ativie

@RaymondAtivie 因为 then 回调函数内的 this 也会丢失（不是组件实例）。 - dfsq

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

}); 

- dfsq