Угловая ошибка изменения обнаружения: выражение было изменено после его проверки. Предыдущее значение: 'over'. Текущее значение: 'side'

Question

Я получаю следующую ошибку только в Firefox. Не в Chrome или IE.

"Error: Error in ./DefaultLayoutComponent class DefaultLayoutComponent - inline template:2:14 caused by: Expression has changed after it was checked. Previous value: 'over'. Current value: 'side'.”.

Это сиденватый дизайн из материала, который бросает это.

Вот строка 2 шаблона HTML DefaultLayoutComponent:

<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, где Гюнтер предлагает использовать ngOnChanges и затем обнаруживать эти изменения, но я все еще бросаю ошибку.

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

Я пробовал это, но я все еще бросаю ошибку. Любая помощь очень ценится.

Answer 1

Только что получил исправление для моей проблемы.

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

Answer 2

была такая же проблема ... отлажена его на целый день, пока я не обнаружил, что существует конфликт имен: был собственностью «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 проблема; точное сообщение об ошибке было

Expression has changed after it was checked. Previous value 'false'. Current value 'true'.