View doesn't update in android 6.0.1, but it works normally in android 5.0

Ionic Framework ionic-v3
1

Hello Guys -

I am having a Problem with my View not beeing updated properly on my Ionic2 android App.
This problem appear in Android 6.0.1, but not appear in Android 5.0.

I tried ApplicationRef.tick() , NgZone.run(callback), ChangeDetectorRef.detectChanges(), and these can’t solve the problem. (Android 6.0.1)

View does not update util I touch somewhere of screen, or trigger a select…etc.

here is my view

46
螢幕快照 2018-01-24 下午12.52.46.png752×1300 24.8 KB

util I touch somewhere or trigger select, it show data immediately.

31
螢幕快照 2018-01-24 下午12.55.31.png752×1290 88.9 KB

and here is my sample code:

1516713792321
1516713792321.jpg2512×1684 669 KB

1516713847808
1516713847808.jpg2508×1192 721 KB

My Package:
“dependencies”: {
“@angular/common”: “5.0.0”,
“@angular/compiler”: “5.0.0”,
“@angular/compiler-cli”: “5.0.0”,
“@angular/core”: “5.0.0”,
“@angular/forms”: “5.0.0”,
“@angular/http”: “5.0.0”,
“@angular/platform-browser”: “5.0.0”,
“@angular/platform-browser-dynamic”: “5.0.0”,
“@ionic-native/camera”: “^4.4.2”,
“@ionic-native/core”: “4.3.2”,
“@ionic-native/file”: “^4.3.1”,
“@ionic-native/file-transfer”: “^4.4.2”,
“@ionic-native/in-app-browser”: “^4.4.2”,
“@ionic-native/splash-screen”: “4.3.2”,
“@ionic-native/status-bar”: “4.3.2”,
“@ionic/storage”: “2.1.3”,
“cordova-android”: “^6.3.0”,
“cordova-ios”: “^4.5.0”,
“cordova-plugin-camera”: “^2.4.1”,
“cordova-plugin-compat”: “^1.2.0”,
“cordova-plugin-device”: “^1.1.4”,
“cordova-plugin-file”: “^4.3.1”,
“cordova-plugin-file-transfer”: “^1.6.1”,
“cordova-plugin-inappbrowser”: “^1.7.2”,
“cordova-plugin-ionic-webview”: “^1.1.16”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “^2.2.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“ionic-angular”: “nightly”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
“rxjs”: “5.5.2”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
“@ionic/app-scripts”: “nightly”,
“typescript”: “2.4.2”
},

ionic info:
cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 ios 4.5.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node  : v6.11.4
npm   : 3.10.10 
OS    : macOS Sierra
Xcode : Xcode 9.0 Build version 9A235

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

Thanks for your answers :slight_smile:

2

Remove the change detection thing firstly.

Swap round the this.showSpinner=false and this.offices = data.json lines.

On your ion-card add on *ngIf=“!showSpinner”

Additionally
You would do yourself a favour by using proper type safety for your objects, no one would have a clue what fields are available inside this.offices by just looking.

3

@Judgewest2000, thanks for your help. but it seems not work. and I find a post like my problem.

4

you could also add after the this.showSpinner=false line a simple…

alert('this part has been actioned');

Just to try and work out if that is executing as you’d expect and not when you touch the screen for example.

Not saying that’ll resolve your issue, but you might learn something.

5

Yes, and I tried alert(‘something’), it’s will update view immediately. but if I don’t trigger alert, or select …etc. first tab does not update view until I trigger something.

6

hum…

try putting it like this…

   this.offices = data.json();
   setTimeout(() => this.showSpinner = false, 100);
7

Your app-scripts is old. So are your Node and npm, but app-scripts would be the priority to update.

8

I don’t know what is causing your problem, but I’ve had unpredictable behavior when I put a directive on an ion-card. Now I do things like this:

<div *ngIf="">
  <ion-card>
  </ion-card>
</div>