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

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

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

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

有小费吗？

(我试过使用 ChangeDetectorRef.detectChanges(); 它有效，但随后范围滑块将不起作用。可拖动点不会更新，或者不会移动到您点击的位置。)

这页纸:

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

然后我想这可能是一些 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");
})

之后， View 开始按预期响应。我觉得这有点像黑客。有人可以对这里发生的事情有所了解吗？

最佳答案

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

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

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

另一种解决方法(至少对于范围滑块)是使用 AppllicationRef tick() 方法，该方法会强制 DOM 更新。有关它的更多信息 here 。

关于ionic-framework - ionic 2 : View does not update based on model change，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43114280/