ExpressionChangedAfterItHasBeenCheckedError при использовании asyn c pipe

Question

Я получаю эту ошибку (ExpressionChangedAfterItHasBeenCheckedError), когда использую asyn c pipe! Код здесь . Где я делаю не так?

Answer 1

Думаю, ошибка исходит от {{users$|async|json}}. В сервисе макета он возвращает значение null, и попытка его отображения вызывает ошибку.

Я тестировал вот так, и у меня нет ошибок.

  <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:

Если я понимаю, ошибка заключается в изменении наблюдаемого объекта.

вы можете сделать что-то подобное, когда вы вызываете свою службу макета. Что вы думаете ? Мне он кажется чище.

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