UI在ionv2框架中沒有更新

Question

<ion-item> 
    <div> 
     <ion-calendar (change)="onPeriodChange($event)"></ion-calendar> 
    </div> 
</ion-item> 

<ion-list> 
    <ion-item> 
     <ion-label>{{'tasks>task-create>time'|translate}}<ion-badge>{{time.lower}} - {{time.upper}}</ion-badge></ion-label> 
     <ion-range min="0" max="23" dualKnobs="true" [(ngModel)]="time" color="secondary"> 
      <ion-label range-left>{{'tasks>task-create>zero'|translate}}</ion-label> 
      <ion-label range-right>{{'tasks>task-create>twothree'|translate}}</ion-label> 
     </ion-range> 
    </ion-item> 
</ion-list> 

我在ionic2應用程序中有這兩個控件，當我點擊日曆中的日期或滑動離子範圍控件時。它不顯示我更新日曆和範圍控制。但是，只要我打開下拉菜單（ion-select），日曆會突出顯示所選日期和滑塊，並將其移至我選擇的位置。

Answer 1

有幾個選項，你可以嘗試（全部在.ts文件）：

1. 使用NgZone.run()
2. 使用ApplicationRef.tick()

對於選項＃1，你需要注入NgZone加入您的代碼（通過import）並用run()換行，無論代碼如何控制UI。例如：

import {Component, NgZone} from '@angular/core'; 
[...] 
ngZone.run(()=>{ 
    console.log("It's running!"); 
}); 

至於選項＃2，你需要導入ApplicationRef，然後調用tick()方法，每當你想強制視圖進行更新。例如：

import {Component, ApplicationRef} from '@angular/core'; 
[...] 
console.log("It's running!"); 
applicationRef.tick(); 

還有第三個選項（這我不熟悉），這是從@angular/core以類似的方式導入ChangeDetectionRef並調用其detectChanges()方法applicationRef.tick()。

請注意，這些都是Angular 2方法，因此在Angular 2's docs下記錄。