Ionic framework Ionic 2:视图不根据模型更改进行更新

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

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

我有另一个页面，就像这一个工作，我不明白为什么这不是

有什么建议吗

（我已尝试使用ChangeDetectorRef.detectChanges（）；它可以工作，但Range Slider无法工作。可拖动点不会更新，或者不会移动到您点击的位置。）

页面：

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

更新：找到解决方法 我尝试创建一个单独的应用程序，在那里使用完全相同的代码。这让我觉得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");
})

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

然后我认为这可能是某个区域问题，并将setRoot调用包装在Zone.run（）中，如下所示：

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

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

---

之后，视图开始按预期响应。我觉得这有点像黑客。有人能解释一下这里发生了什么吗？

看起来您基本上是在使用ngZone来确保Angular知道您更改了什么，所以它将重新加载DOM的该部分以反映更改。我不觉得这是一个黑客，因为你只是确保它的工作预期

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

我以前就遇到过这样的问题，使用分区通常是你最好的选择。如果你不按一下按钮之类的东西，界面的一部分就会被卡住

---

另一种解决方法（至少对于范围滑块）是使用applicationref tick（）方法，该方法强制进行DOM更新。有关它的详细信息。

我在代码中没有看到定义showFilterPane。我是不是错过了什么？您正在访问它，但它似乎从未被声明（既不是公共的/私有的，也不是受保护的），我似乎删除了一些在我发布之前没有注释的代码。我已经更新了这个问题。