View is not updating (ionic5/Angular9)

Ionic Framework ionic-v3
1

Hi,

I have a strange issue with this code (ionic5/angular9) :

<ion-item *ngFor="let story of stories; let i = index">
  <ion-grid>
      <ion-row>
          <ion-col col-4>{{story.distanceLabel}}</ion-col>

TS

    this.sub = this.gpsProvider.getPositionWatcher()
      .subscribe((data) => {
        if (data.coords) {
          if (data.coords.latitude !== this.coords.latitude || data.coords.latitude !== this.coords.latitude) {
            this.coords = data.coords;
            for (let i = 0; i < this.stories.length; i++) {
              this.stories[i].distanceLabel = this.gpsProvider.getDistanceTxt(this.coords.latitude, this.coords.longitude, this.stories[i].latitude, this.stories[i].longitude);
            }
            alert('test : '+this.stories[0].distanceLabel);
          }
        }
      });

Behavior :

First display : For example i’ve got a distance like : 50 meters
After few seconds, the gps observer launch the alert : ‘test 40 meters’ but my view isn’t refreshed.
If I move to a new page, just before leaving I can see the view up to date (with 40 meters in this case)

What is wrong in my code ?

2

Using NgZone solve this issue :+1: