ionic-framework - ionic 2 : View does not update based on model change

Question

我有一个非常简单的页面，其中包含几个控件。

我的问题是当点击右上角的图标时，页面不会改变模型。这将切换 showFilterPane 变量，该变量应再次显示或隐藏基于 *ngIf="showFilterPane"的 div。

我有另一个页面就像这个页面一样工作，我不知道为什么这不是。

有小费吗？

(我尝试过使用 ChangeDetectorRef.detectChanges(); ，它可以工作，但是 rangeslider 将无法工作。可拖动点不会更新，或者不会移动到您点击的位置。)

这页纸:

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

组件:

    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");
})

然后我认为这可能是一些区域问题，并将 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");
})

之后， View 开始按预期响应。我觉得这有点骇人听闻。有人可以阐明这里发生的事情吗？

Answer 1

似乎您基本上是在使用 ngZone 来确保 Angular 知道您更改了内容，因此它将重新加载 DOM 的该部分以反射(reflect)更改。我不觉得这是一个黑客，因为你只是确保它按预期工作。

Angular 2 具有一些优化功能，可以帮助您的应用程序运行更流畅，其中之一就是随时随地避免 DOM 更新。通过使用区域(或 ngZones)，您基本上是在告诉 Angular “注意这部分，它会发生变化，我需要将该变化反射(reflect)在 DOM 中”。

我之前遇到过这类问题，使用区域通常是你最好的选择。除非您触摸按钮或类似的东西，否则会遇到界面的一部分会卡住的情况。

另一个解决方法(至少对于范围 slider )是使用 AppllicationRef tick() 方法，它强制更新 DOM。更多信息 here .