View doesnt Update all the time in Ionic


#1

Hello Guys -

I am having a Problem with my View not beeing updated properly on my Angular/Ionic App

For Example: I have a tab-bar, and i clicked on the “account-tab” - my view already appeared and everything is fine- BUT my tab-bar doesnt update - it still says im on another tab (see picture)

If I Go on of the the Links at the Page and push another Page- the Tab Button updates.

Another Example:

I have an ion-input html tag with an NgModel two-way-Binding, which is [disabled] if there is no Input.
the “Submit” button should be enabled as soon as some value is provided in the input box - this does not happen!
plus you can still see the Tab-Button-Problem described above.

-> If i Click on a Button which shows a Pop-Up - the View gets Updated and everythings works correctly :

I dont think there is any mistake with data-binding or HTML etc. This is a Problem with View Updating and Angular-Zone, cause i did this as an Example:

" this._zone.run(function() {
that.showGroup = !that.showGroup;
that.displayIcon();
});"

if I change Properties inside this zone.run function - my view gets updated properly!! - otherwise is does not or not all the time.

BUT I Dont want to use zone.run all the time!
I need a generic solution

My Package:

“dependencies”: {
"@angular/common": “4.1.3”,
"@angular/compiler": “4.1.3”,
"@angular/compiler-cli": “4.1.3”,
"@angular/core": “4.1.3”,
"@angular/forms": “4.1.3”,
"@angular/http": “4.1.3”,
"@angular/platform-browser": “4.1.3”,
"@angular/platform-browser-dynamic": “4.1.3”,
"@ionic-native/barcode-scanner": “4.3.1”,
"@ionic-native/camera": “^4.2.1”,
"@ionic-native/core": “3.12.1”,
"@ionic-native/date-picker": “^4.3.1”,
"@ionic-native/google-plus": “^4.3.0”,
"@ionic-native/splash-screen": “3.12.1”,
"@ionic-native/status-bar": “3.12.1”,
"@ionic-native/keyboard": “4.3.2”,
"@ionic/storage": “2.0.1”,
“angularfire2”: “^5.0.0-rc.3”,
“cordova-android”: “^6.0.0”,
“cordova-browser”: “^4.1.0”,
“cordova-plugin-camera”: “^2.4.1”,
“cordova-plugin-compat”: “^1.1.0”,
“cordova-plugin-console”: “^1.0.5”,
“cordova-plugin-datepicker”: “^0.9.3”,
“cordova-plugin-device”: “^1.1.4”,
“cordova-plugin-googleplus”: “^5.1.1”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “^2.2.2”,
“cordova-plugin-whitelist”: “git+https://github.com/apache/cordova-plugin-whitelist.git”,
“firebase”: “^4.6.0”,
“ionic-angular”: “3.6.0”,
“ionic-plugin-deeplinks”: “^1.0.14”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
"@ionic-native/fcm": “4.3.2”,
“phonegap-plugin-barcodescanner”: “^6.0.0”,
“rxjs”: “5.4.0”,
“sw-toolbox”: “3.6.0”,
“cordova-plugin-fcm”: “^2.1.2”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
"@angular/cli": “^1.4.2”,
"@ionic/app-scripts": “2.1.4”,
“typescript”: “2.3.4”
},

Thanks for your answers :slight_smile:


#2

I have the exact same problem. Going for example from the login Page to the Tab Page the tab icons are not highlighted and highlight the wrong tab when I switch tabs. And I have the same problem with the 2 way data binding, in that a list is updated, but nothing is shown in the UI until a button is pressed or NgZone is used.

The problem is only present on iPhone, when I test it in browser everything works as expected.

Using Ionic 3.15.0.


#3

Can you upgrade to the latest Ionic release and try it again? And don’t forget to update all your other dependencies such ionic native, angular etc.

You can follow my upgrade guide: Guide: How to update to Ionic 3.X


#4

Hello LoLStats, thanks for your answer.

i followed your Guide. Deleted my Node_modules, updated my package and installed with npm again.
It did not help tho… Here is my new package.json:

“dependencies”: {
"@angular/common": “4.4.3”,
"@angular/compiler": “4.4.3”,
"@angular/compiler-cli": “4.4.3”,
"@angular/core": “4.4.3”,
"@angular/forms": “4.4.3”,
"@angular/http": “4.4.3”,
"@angular/platform-browser": “4.4.3”,
"@angular/platform-browser-dynamic": “4.4.3”,
"@ionic-native/barcode-scanner": “4.3.1”,
"@ionic-native/camera": “^4.2.1”,
"@ionic-native/core": “4.3.2”,
"@ionic-native/date-picker": “^4.3.2”,
"@ionic-native/google-plus": “^4.3.0”,
"@ionic-native/splash-screen": “4.3.2”,
"@ionic-native/status-bar": “4.3.2”,
"@ionic/storage": “2.0.1”,
“angularfire2”: “^5.0.0-rc.2”,
“cordova-android”: “^6.0.0”,
“cordova-browser”: “^4.1.0”,
“cordova-plugin-camera”: “^2.4.1”,
“cordova-plugin-compat”: “^1.1.0”,
“cordova-plugin-console”: “^1.0.5”,
“cordova-plugin-datepicker”: “^0.9.3”,
“cordova-plugin-device”: “^1.1.4”,
“cordova-plugin-googleplus”: “^5.1.1”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “^2.2.2”,
“cordova-plugin-whitelist”: “git+https://github.com/apache/cordova-plugin-whitelist.git”,
“firebase”: “^4.5.0”,
“ionic-angular”: “3.7.1”,
“ionic-plugin-deeplinks”: “^1.0.14”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
“phonegap-plugin-barcodescanner”: “^6.0.0”,
“rxjs”: “5.4.3”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
"@angular/cli": “^1.4.2”,
"@ionic/app-scripts": “3.0.1”,
“typescript”: “2.3.4”
},


#5

Hello guys!

I have fixex this Issue (thanks to Ionic tabs doesn't update view while changing from tab to tab)

The Problem is: IF YOU navigate with your NavCtrl INSIDE a callback-function, it will not be inside the Ng-Zone.

you can fix this Problem by navigating inside the ng.zone.run() method :

this._zone.run(() => {
this._navCtrl.push(TabsPage);
});