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

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() ,, 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

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

and here is my sample code:

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


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

Environment Variables:

ANDROID_HOME : not set


backend : pro

Thanks for your answers :slight_smile:

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”

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.

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

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.

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.


try putting it like this…

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

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

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="">