Question

我有一个奇怪的问题，当我更改模型中的值时，它不会更新视图。我的演示是一个简单的页面，它显示了一个计时器，其值在模型中更新，我希望在UI中反映出来：

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
     template: '<ion-content>Ticks (every second) : {{ticks}}</ion-content>',
})
export class ProgramOverviewPage {
  ticks = 0;
  ngOnInit() {
    let timer = Observable.timer(0, 1000);
    timer.subscribe(t => { this.ticks = t; console.log(t);});
  }
}

如果我将此页面设置为我的根页面，它可以正常工作。但是，如果我将不同的页面设置为我的根页面，然后立即导航到计时器页面：

ngOnInit() {
  this.nav.push(ProgramOverviewPage, {
  });
}

然后页面呈现，但刻度值不会更新UI。除了NavController搞乱ChangeDetector之外，我无法想到任何其他事情，但我不知道为什么会这样。我可以添加任何东西来调试这个。非常感谢。

"ionic-angular": "2.0.0-beta.10"

Answer 1

Ionic 2似乎会为每个内容对象自动设置Change Detection to OnPush（我相信<ion-content>生成）。这可以通过使用Augury并单击Content对象来验证。

因此，每当您进行任何应使用ChangeDetectorRef.detectChanges()方法推送到UI的更改时，都必须明确告知更改检测系统。有关详细信息，请参阅thoughtram blog。

import { Component, ChangeDetectorRef } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
  template: '<ion-content>Ticks (every second) : {{ticks}}</ion-content>',
})
export class ProgramOverviewPage {
  ticks = 0;
  ngOnInit() {
    let timer = Observable.timer(0, 1000);
    timer.subscribe(t => { 
      this.ticks = t; 
      console.log(t);
      this.cd.detectChanges(); // Invoke the change detector
    });
  }
}

仅在第二个NavController页面

1 个答案: