Angular 2 更改检测错误：表达式在检查后已更改。以前的值：'over'。当前值：'边'

Question

我在 Firefox 中收到以下错误。不在 Chrome 或 IE 中。

“错误：./DefaultLayoutComponent 类 DefaultLayoutComponent 中的错误 - 内联模板：2:14 原因：检查后表达式已更改。以前的值：'over'。当前值：'side'。”。

这是来自 Material Design 的 sidenav 样式。

这是 DefaultLayoutComponent html 模板的第 2 行：

<md-sidenav (mouseover)="toggleHover(true)" (mouseout)="toggleHover(false)" (close)="sidenavToggle(false)" (open)="sidenavToggle(true)" [mode]="(_navigation.mediumScreenAndDown && sidenavStyle !== 'off') ? 'over':sidenavMode" [ngClass]="{'icon-sidenav': ((sidenavStyle === 'icon' || sidenavStyle === 'icon overlay') && _navigation.largeScreen), 'over': (sidenavStyle === 'icon overlay')}">

这是 DefaultLayoutComponent 打字稿中被调用以确定 sidenavStyle 的方法

  public get sidenavMode(): string {
      if(this.sidenavStyle === 'icon overlay' && this.isHovering) {
          return 'over';
      } else if(this.sidenavStyle === 'icon' || this.sidenavStyle === 'icon overlay') {
         return 'side';
      } else if(this.sidenavStyle === 'hidden') {
         return 'over';
      } else if(this.sidenavStyle === 'off') {
         return 'over';
      }
      return this.sidenavStyle;
  }

我已经确定这是一个更改检测问题，我发现了这个 stackoverflow Angular 2 - Expression has changed after it was checked，Gunter 建议使用 ngOnChanges 然后检测这些更改，但我仍然抛出错误。

ngOnChanges() {
    this.sidenavMode; //method where I am determining sidenav style
    this.changeDetectorRef.detectChanges();
}

我已经尝试过了，但我仍然抛出错误。非常感谢任何帮助。

Answer 1

有同样的问题...调试了一整天，直到我发现存在命名冲突：控制器上声明了一个属性“userSchedule”，但随后有一个“userSchedules”数组以如下方式迭代：

<div *ngFor="let userSchedule of userSchedules; let row = index">
  {{ userSchedule.customer }}
</div>

将其更改为后一切正常：

<div *ngFor="let userScheduleRow of userSchedules; let row = index">
    {{ userScheduleRow.customer }}
</div>

注意：在我的情况下，这也是一个 Firefox-olny 问题；确切的错误信息是

表达式在检查后发生了变化。以前的值“假”。当前值“真”。

Answer 2

刚刚解决了我的问题。

constructor(private changeDetectorRef:ChangeDetectorRef, ngZone: NgZone) {
    window.onresize = (e) => {
      ngZone.run(() => {
        //console.log("this.sidenavStyle = " + this.sidenavStyle);
        this.sidenavStyle;
        this.changeDetectorRef.detectChanges();
      });
    };
}