使用异步 pipe 时的 ExpressionChangedAfterItHasBeenCheckedError

Question

I get this error(ExpressionChangedAfterItHasBeenCheckedError) when I use async pipe! The code is here . Where I'm doing wrong?

Answer 1

I think the error is coming from {{users$|async|json}} . In layout service, it returns null and trying to display it causes an error.

I tested like that and I do not have any error.

  <h1>Layout Component</h1>
  <div>
    <div *ngIf="layoutService.getSpinnerState|async">
      <span>SPINING...
      </span>
    </div>
  </div>

  <p>StateSpinner: {{ layoutService.getSpinnerState|async }} </p> 

ngOnInit() {
    this.layoutService.withSpinner(this.profileService.getUser()).subscribe();
  }

edit:

If I understand, the error, it is the change in your observable that makes it.

you can do something like that, when you call your layout service. What do you think? It looks cleaner to me.

withSpinner<T>(obs:Observable<T>){
    this.setSpinnerState(true)
    return obs.pipe(
      delay(2000),
      finalize(()=>this.setSpinnerState(false))
    );
  }