Ionic app dynamically data not showing correctly in template iOS, Android works


I have an Ionic 3 app for Android and iOS. The app uses an API to get data from the server. This works for Android, but for iOS I don’t get the view updated with the response of the server.

.ts file

ionViewWillEnter() { => {
        this.profile = res['profile'];
        this.statistics = res['statistics'];


return this.http.get(`${this.API_URL}/${resource}`, {'params': param})
        .map(response => response);


<ng-container *ngIf=" === false">
    <ion-row class="stats" padding-horizontal="">
        <ion-col col-6>Friends</ion-col>
        <ion-col col-6 text-right>{{statistics?.friends}}</ion-col>

    <ion-row class="stats" padding-horizontal="">
        <ion-col col-6>Achievements</ion-col>
        <ion-col col-6 text-right>{{statistics?.achievements}}</ion-col>

in Android the stats are nicely updated, but on iOS it stays blank except the fixed text, that is shown.

But when we go to a subpage and then use the back button or open and close the menu, we get the data visible (see attached screenshot).

Ionic info


   ionic (Ionic CLI)  : 4.12.0 (C:\Users\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.4
   @ionic/app-scripts : 3.2.3


   cordova (Cordova CLI) : 9.0.0
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-webview 1.2.1, (and 11 other plugins)


   Android SDK Tools : 26.1.1 (C:\Android\android-sdk)
   NodeJS            : v10.15.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10