javascript - AngularJS2 "Uttrycket har ändrats efter att det kontrollerades" undantag när CSS-klass ändras vid klick

Jag skriver funktionalitet för att ändra CSS-klassen på en tabell när man klickar på en knapp. De tre knapparna är rutnätsvy, miniatyrvy och listvy. Av någon anledning får jag ett konsolfel när jag klickar på något av alternativen:

ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'
ORIGINAL STACKTRACE:
Error: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'
    at ExpressionChangedAfterItHasBeenCheckedException.BaseException [as constructor] (http://localhost:5000/lib/@angular/core/bundles/core.umd.js:4412:27)
    at new ExpressionChangedAfterItHasBeenCheckedException (http://localhost:5000/lib/@angular/core/bundles/core.umd.js:8538:20)
    at checkBinding (http://localhost:5000/lib/@angular/core/bundles/core.umd.js:8681:23)
    at DebugAppView._View_ShoppingTableComponent0.detectChangesInternal (ShoppingTableComponent.template.js:1125:7)
    at DebugAppView.AppView.detectChanges (http://localhost:5000/lib/@angular/core/bundles/core.umd.js:12143:18)
    at DebugAppView.detectChanges (http://localhost:5000/lib/@angular/core/bundles/core.umd.js:12247:48)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:5000/lib/@angular/core/bundles/core.umd.js:12169:23)
    at DebugAppView._View_ShoppingTableComponent_Host0.detectChangesInternal (ShoppingTableComponent.template.js:31:8)
    at DebugAppView.AppView.detectChanges (http://localhost:5000/lib/@angular/core/bundles/core.umd.js:12143:18)
    at DebugAppView.detectChanges (http://localhost:5000/lib/@angular/core/bundles/core.umd.js:12247:48)
ERROR CONTEXT:
[object Object]

Knapparna är enkla <a>-taggar som ändrar utseendet beroende på enumvärden 0, 1 och 2 (där 0 är tabell, 1 är miniatyr och 2 är lista) och ser ut som följer:

<a (click)="changeAppearance(0)" *ngIf="viewMode == 0" class="table-view view-item active"><i class="fa fa-table"></i></a>
<a (click)="changeAppearance(0)" *ngIf="viewMode != 0" class="table-view view-item"><i class="fa fa-table"></i></a>
<a (click)="changeAppearance(1)" *ngIf="viewMode == 1" class="list-view view-item active"><i class="fa fa-th-large"></i></a>
<a (click)="changeAppearance(1)" *ngIf="viewMode != 1" class="list-view view-item"><i class="fa fa-th-large"></i></a>
<a (click)="changeAppearance(2)" *ngIf="viewMode == 2" class="grid-view view-item active"><i class="fa fa-th-list"></i></a>
<a (click)="changeAppearance(2)" *ngIf="viewMode != 2" class="grid-view view-item"><i class="fa fa-th-list"></i></a>

Då ser changeAppearance-metoden ut i min komponent på följande sätt:

changeAppearance(x: number) {
    this.viewMode = x;
        }

Funktionen ändrar bara värdet på viewMode som är definierat till 0 (tabellvy) vid onInit. Jag har försökt ändra värdet vid onInit till 1 och 2 för att bekräfta att det inte är ett fel som rör CSS.

Jag tror att det kan vara en AngularJS2-tidslinje eller ett problem med förändringsdetektering, men jag är inte säker på exakt vad det kan vara.

All hjälp med att ta itu med detta problem skulle vara bra.