Ionic 2: view not updated based on model change

Question

I have a very simple page with several controls.

My problem is that the page does not change the model settings when the icon in the upper right corner is clicked. This toggles the showFilterPane variable, which again should show or hide the div based on * ngIf = "showFilterPane".

I have another page, like this one, working, and I can’t understand why this is not so.

Any tips?

(I tried using ChangeDetectorRef.detectChanges (), which works, but then the rangelider will not work. The dragged point does not update or move to where you are touching.)

Page:

<ion-header>
  <ion-navbar>
    <ion-title>MY AO</ion-title>
    <ion-buttons end>
      <button ion-button (click)="toggleFilterPane()" icon-only>
        <ion-icon name="options"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="container">
    <div class="left">
      <div *ngIf="isSearching" class="spinner-container">
        <ion-spinner></ion-spinner>
      </div>
      <!-- put content here -->

    </div>

    <div class="right" *ngIf="showFilterPane">
      <ion-list inset>
        <ion-list-header>BANA</ion-list-header>        
        <ion-item>
          <ion-select multiple="true" [(ngModel)]="woTrackFilter">
            <ion-option>1</ion-option>
            <ion-option>2</ion-option>
            <ion-option>3</ion-option>
            <ion-option>4</ion-option>
            <ion-option>5</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>
      <ion-list inset>
        <ion-list-header>TEKNIKSLAG</ion-list-header>
        <ion-item>
          <ion-select multiple="true" [(ngModel)]="woDisciplineFilter">
            <ion-option>Signal</ion-option>
            <ion-option>Bana</ion-option>
            <ion-option>EL</ion-option>
            <ion-option>Tele</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>    
      <ion-list inset>
        <ion-list-header>DAGAR</ion-list-header>
        <ion-item>
          <ion-range min="10" max="80" step="4" [(ngModel)]="woDaysFilter">
            <ion-label range-left>10</ion-label>
            <ion-label range-right>80</ion-label>>
          </ion-range>
        </ion-item>
      </ion-list>
      <button ion-button (click)="doSearch()">Search</button>
    </div>
  </div>
</ion-content>

Component:

    import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { WorkOrderDashboardPage } from "../work-order-dashboard/work-order-dashboard";
@Component({
  selector: 'page-work-order-list',
  templateUrl: 'work-order-list.html'
})
export class WorkOrderListPage {
  private isSearching: boolean = false;
  private showFilterPane: boolean=false;
  private woTrackFilter: string[];
  private woDisciplineFilter: string[];
  private woDaysFilter: number;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // Initialize storage providers here

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad WorkOrderListPage');
  }

  toggleFilterPane(): void {
    this.showFilterPane = !this.showFilterPane;
  }

  viewWorkOrder(event, workOrder): void {
    this.navCtrl.push(WorkOrderDashboardPage, { workOrder: workOrder });
  }

  doSearch(): void {
    console.log(this.woTrackFilter);
    console.log(this.woDisciplineFilter);
    console.log(this.woDaysFilter);
  }
}

: , . , - LoginPage, setRoot() .

:

WLAuthorizationManager.login("UserLogin", data).then(() => {
  // Success
  console.log("Logged in");
  this.navCtrl.setRoot(WorkOrderListPage);    
},
(err) => {
  // failed
  console.error(err);
  this.showError("Username or password is incorrect");
})

, Zone, setRoot zone.run() :

  WLAuthorizationManager.login("UserLogin", data).then(() => {
  // Success
  console.log("Logged in");
  this.zone.run(() => 
    this.navCtrl.setRoot(WorkOrderListPage)
  );    
},
(err) => {
  // failed
  console.error(err);
  this.showError("Username or password is incorrect");
})

, . , . - , ?

Answer 1

, ngZone, , Angular , , DOM, . , , , .

Angular 2 , , - DOM , . ( ngZones), Angular " , , , DOM".

, - , , . , , - .

( ) AppllicationRef tick(), DOM. .