在检查app.component.ts中的错误后，角度4表达式已更改

Question

I get the ExpressionChangedAfterItHasBeenCheckedError. Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. ExpressionChangedAfterItHasBeenCheckedError. Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. error after I log out somewhere inside the app, and the front getter in app.component.ts changes in its view.

Also, if I enable production mode, the error does not appear! It all works regardless, but I would like not to see the error.

app.component.html

<div class="col-xs-12" [class.space]="!front">
            <router-outlet></router-outlet>
        </div>

app.component.ts

get front() {
        if (localStorage.getItem("user") === "\"admin\"") {
            return false;
        }
        return true;
    }

Answer 1

put the whole code inside a setTimeout like this

get front() {
  return new Promise(resolve => setTimeout(() => {
    if (localStorage.getItem("user") === "\"admin\"") {
      resolve(false);
    }
    resolve(true);
  }, 200));
}