loadingindicator上的ExpressionChangedAfterItHasBeenCheckedError

Question

我的加載指示器出現錯誤，我不明白為什么：

LoadingIndicatorComponent.html：2錯誤錯誤：ExpressionChangedAfterItHasBeenCheckedError：檢查表達式后，表達式已更改。 先前的值：“ hidden：true”。 當前值：“隱藏：假”。

我有一個簡單的加載指示器圖像：

<img class="loader" [hidden]="!isLoading" src="loading.svg" alt="Loading..." />

使用以下代碼：

export class LoadingIndicatorComponent implements OnInit {
  public isLoading = false;
  constructor(private loader: LoadingIndicatorService) {
  }

  ngOnInit() {
    this.loader.IsLoading.subscribe((value) => {
      this.isLoading = value;
    });
  }
}

利用以下服務：

export class LoadingIndicatorService {
  constructor() { }

  private workload = 0;
  private _loading: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  public readonly IsLoading: Observable<boolean> = this._loading.asObservable();

  public StartWork(): void {
    this.workload++;
    this._loading.next(this.workload > 0);
  }

  public EndWork(): void {
    this.workload--;
    this._loading.next(this.workload > 0);
  }
}

Answer 1

您正在導致問題的變更檢測周期中修改isLoading值。 這是這行代碼

this.loader.IsLoading.subscribe((value) => {
  this.isLoading = value;
});

正在由您的服務修改加載。 所以你需要為此解決

this.loader.IsLoading.subscribe((value) => {
 Promise.resolve(null).then(() =>  this.isLoading = value);
});

答案是基於這篇文章的： 您需要了解有關ExpressionChangedAfterItHasBeenCheckedError錯誤的所有信息

Answer 2

我也遇到這種類型的問題。 用這個

this.loader.IsLoading.subscribe((value) => {
    setTimeout(() => this.isLoading = value, 0)
});