Ion-checkbox not updating in view

Ionic Framework ionic-v3
1

Hi folks!
I’ve a page with several checkboxes in ion-items using a formgroup:

html page

<ion-content color="dark" padding>
  <form [formGroup]="form" novalidate>
  <ion-item>
    <ion-label color="primary">{{ "REACHABLE_BY_CAR" | translate }}</ion-label>
    <ion-checkbox item-right formControlName="reachable_car"></ion-checkbox>
  </ion-item>
  ... more checkboxes

TS

this.form = new FormGroup({
  reachable_car: new FormControl(this.hut.reachable_car),

Everything works fine, when I push the detail page from a list page and then push the page with the checkboxes.
BUT
when I push the detail-page from a marker in Google maps and then push the page with the checkboxes, the view/page is not updating:
When I click a checkbox, the checkbox doesn’t change on the UI, but the form value changes (because the changes value is later saved correctly in the database).
The checkboxes are also showing the correct values retrieved from the database and initialized with the form group.

$ionic info

Ionic:

Ionic CLI : 5.2.7 (C:\Users\tk\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.5
@ionic/app-scripts : 1.3.7

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0, ios 5.0.1

Thanks for your help!

2

This code that interacts with the navigation is the crucial part. I’m going to speculate that you’re jumping outside of the proper zone.

3

Thank you for your quick response!
What do you mean by “jumping outside of the proper zone”?
This is the “navigation chain”:

// (maps page with Google Maps)
marker.addEventListener(GoogleMapsEvent.INFO_CLICK).subscribe(e => {
  this.navCtrl.push('HutDetailPage', params);
});

// (in HutDetailPage)
// call as modal page
let filterModal = this.modalCtrl.create(EditEquipmentPage, { hut: this.hut });
filterModal.onDidDismiss(data => {
       this.prepareDisplayFields();
})
filterModal.present();

So actually the last page was not pushed but is a modal page…

4

You shouldn’t have to worry about it. If you’re not using the ionic-native shim to deal with Google Maps, I would highly suggest doing so, at which point all these problems may ride merrily off into the sunset. This article, while dated now, still does a good job of describing the basic concept.

So if this line is going outside anything Angular-aware, this is likely where the code inside the subscription is running outside the Angular zone and initiating the havoc.

5

I’m using the Google Maps ionic native plugin/wrapper:

"@ionic-native/google-maps": {
  "version": "4.21.0",
"cordova-plugin-googlemaps": {
  "version": "2.6.2",

How can I judge, this happens? Actually with the page called there (HutDetailPage) everything works fine. This page then calls the modal where checkboxes are not showing the correct state.

Do you need further inormation?
Thanks!

6

According to the docs, there is a static assertInAngularZone method that you can call wherever you suspect you might have jumped, such as in that subscription that pushes the HutDetailPage. Another possibility that causes mysterious UI stoppage is when you have an uncaught exception somewhere. That can derail the entire change detection cycle - check your JavaScript console.

7

Thanks!! I’ll check the same.
Just for clarification: The UI ist still responsive. Scrolling works.
Even when I click in the ion-item where the ion-checkbox is placed it visually shows the touch.
Now I’ve observed that now the checkbox state changes on the UI - but after some delay. Seems, that it was a “timing” issue from the beginning. Not sure what’s the reason for this.

But I think we can close the topic for now, since it’s OK from UX perspective. I’ll not dig deeper right now to investigate on the root cause (because I’ve currently no idea how to do the debugging/analysis).

Thanks again for your help!