UI 在 ionicv2 框架中未更新

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 (，并用控制 UI 的任何代码包装run()。例如：

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并以类似于applicationRef.tick()的方式调用其detectChanges()方法。

请注意，这些都是 Angular 2 方法，因此记录在 Angular 2 的文档下。