Question

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

我的问题是，当单击右上角的图标时，页面不会拾取模型的更改。这会切换showFilterPane变量，该变量应该根据* ngIf =＆＃34; showFilterPane＆＃34;来显示或隐藏div。

我有另一个页面就像这个工作，我无法弄清楚为什么这不是。

任何提示？

（我已经尝试过使用ChangeDetectorRef.detectChanges（）;但这样可以使用rangelider。可拖动的点不会更新，或者不会移动到你点击的位置。）< / p>

页面：

<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问题，并将zoneRoot调用包装在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更新。有关它的更多信息here。

离子2：视图不会根据模型更改进行更新

1 个答案: