[Solved] Data value does not update

Ionic Framework ionic-v3
1

Hello, I’m using ionic2 to build app integrating google maps,
I have a problem with view updates.

Here is the logic

  1. get current GPS values
  2. get the address of the GPS
  3. set the address value to this.start (here is the problem)

I have tried NgZone, Events, but everything wasn’t working except setTimeout from the constructor, the setTimeout function actually updates the value but the Event doesn’t.

constructor(private nav: NavController, public events: Events) {
  // setTimeout(()=> {
  //   this.start = "abc";
  // }, 2000);

  this.init();
  this.events.subscribe('user:currentGPS', (data) => {
      this.start = data[0].toString();
      console.log(this.start);
  });
}

init() {
  this.events.subscribe('user:initGPS', (currentGPS) => {
    this.initializeMap(currentGPS[0].lat, currentGPS[0].lng);
  });
  this.events.unsubscribe('user:initGPS', ()=>{});
}

initializeMap(lat, lng) {
  let mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(lat, lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControl: false,
    scaleControl: false
  };
  let mapDiv = document.getElementById("map");
  this.map = new google.maps.Map(mapDiv, mapOptions);
  this.googleGeocoder = new google.maps.Geocoder();

  this.getCurrentGPS(this.map, this.geocoder, this.googleGeocoder, this.events);

}

getCurrentGPS(map, geocoder, googleGeocoder, events) {
  map.addListener("idle", function(){
    googleGeocoder.geocode({
      location: map.getCenter()
    }, (result, status) => {
      this.start = result[0].formatted_address;
      events.publish('user:currentGPS', this.start);
      // console.log(this.start);
    });
  });
}

Solved by NgZone

constructor(private nav: NavController, public events: Events, private zone: NgZone) {
  this.zone = new NgZone({enableLongStackTrace: false});

  console.log(this.start);
  this.init();
  this.events.subscribe('user:currentGPS', (data) => {
    this.zone.run(() => {
      this.start = data[0].toString();
    });
  });
} //constructor