Angular 2 Change Detection Error: Der Ausdruck hat sich geändert, nachdem er überprüft wurde. Vorheriger Wert: "Über". Aktueller Wert: 'Seite'

Question

Ich bekomme den folgenden Fehler nur in Firefox. Nicht in Chrome oder IE.

Dies ist ein SideNav Styling aus Material Design, das dies wirft.

Hier ist die Linie 2 von DefaultLayoutComponent HTML-Vorlage:

<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')}"> 

Hier ist das Verfahren, in dem DefaultLayoutComponent Maschinenschrift die sidenavStyle zu bestimmen aufgerufen wird

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; 
    } 

I festgestellt haben, dass dies eine Änderungserkennungs ist Problem und ich fand diese stackoverflow Angular 2 - Expression has changed after it was checked, wo Gunter schlägt vor, ngOnChanges zu verwenden und dann diese Änderungen zu erkennen, aber ich werfe immer noch den Fehler.

Ich habe das versucht, aber ich werfe immer noch den Fehler. Jede Hilfe sehr geschätzt.

Answer 1

Habe gerade eine Lösung für mein Problem.

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

Answer 2

hatte das gleiche Problem ... es für einen ganzen Tag debuggt, bis ich, dass es einen Namenskonflikt gefunden war: Es gibt eine Eigenschaft „userSchedule“ auf dem Controller deklariert war, dann aber eine Reihe von "es war userSchedules“, die in der folgenden Art und Weise wiederholt wurde:

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

alle arbeitete nach der Fein es an sich verändernde:

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

Anmerkung: in meinem Fall war es auch ein Firefox-olny Problem; die genaue Fehlermeldung war

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