Угловой 2 - отображение значения функции прослушивателя событий в представлении через свойство класса

Question

Я работаю с ионными 2/угловыми 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> 

Когда маркер перетаскивается, я успешно получил координаты и успешно получил адресную строку. Но оператор this недоступен в функции прослушивателя событий для события перетаскивания маркера.

Как я могу приравнивать this.address к моему адресу, которое я получил внутри слушателя событий?

Я попытался сделать общее указание на 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); 

});