View is not updating within a Promise

Ionic Framework ionic-v3
1

My Ionic app works fine when I started it with my PC at work on my android device. Now I am at home and I pulled everything from github to my private windows PC and then I ran “npm install” and “cordova platform add android” and “ionic run android --device”. Now the app does not work like before. I have a page where I load images from a backend server.

<ion-content padding>

  Test
  {{test}}

    <ion-card *ngFor="let image of images" (click)="goToProfilePage(image.hash);">
        <img src="{{image.url}}"/>
        <div class="card-title">{{image.name}}</div>
        <div class="card-subtitle">{{image.address}}, {{image.zip}} {{image.city}}</div>
    </ion-card>

</ion-content>

TS:

images: any;
test: any;

constructor(public navCtrl: NavController, public navParams: NavParams, public uiHelper: UiHelper, public api: ApiService, public zone: NgZone) {
    this.test = "Test2";
    this.loadImages();
}

loadImages() {
    this.test = "Test3";
    this.uiHelper.showLoading();
    this.test = "Test4";
    this.api.getImagesForScreen().then(
        response => {
            this.test = "Test5";
            if (response['status'] == constants.API_ON_SUCCESS) {
                this.test = "Test6";
                console.log("Loaded");
                this.zone.run(() => {
                    this.test = "Test7";
                    this.images = response['data'];
                    this.shuffle(this.images);
                    this.uiHelper.dismissLoading();
                });
            }
            else {
                this.uiHelper.dismissLoadingAndPrintApiErrorWithMessage(response['messages']);
            }
        },
        err => {
            this.uiHelper.dismissLoadingAndPrintApiError();
        }
    );
}

The view output is “Test Test4”. So it seems like the view is not updating anymore within the promise which is returned from api.getImagesForScreen(). The code should work fine, because if I open chrome://inspect and open the console there is “Loaded” logged. So he definitely should show me “Test6” or “Test7” on the view. The promise on api.getImagesForScreen is created like this:

import {Promise} from 'es6-promise';
...
new Promise((resolve, reject) => {
    this.http.get(url).map(res => res.json()).subscribe(
        data => {
            resolve(data);
        },
        err => {
            reject(err);
        }
    );
});

Someone can help me with it?

EDIT:

One more weird thing: The problem occurs when I open the site from an other site. If I set this page as the start page everything is working. But when I switch the page and then go back to that page again, it is not working anymore. So it seems the first time where something is loaded from the backend it is working but on the second time it is not working anymore (only the view, because the console still logs the “loaded success”). And there are no errors in console…

1 Like