Angular 微调器在 http 请求上异步

Question

我已经安装了一个 http 请求微调器，如果请求正在进行中，该微调器就会出现。除了我收到以下错误：

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

<div class="container-fluid">
  <div class="row col-md-12">
    <div class="spinner-style" *ngIf="isLoading | async">
      <mat-spinner spinner-delay="2000"></mat-spinner>
    </div>

    <app-another-comp-table[isLoading]="isLoading | async">
.....
    </app-another-comp-table>
  </div>
</div>

我的组件中的方法初始化：

ngOnInit(){
    this.isLoading = this.loaderService.getIsLoading$();

...
}

我的加载程序服务：

export class LoaderService {
  public isLoading = new BehaviorSubject(false);

  constructor() { }

  getIsLoading$(): Observable<boolean> {
    return this.isLoading.asObservable();
  }
  
}

Answer 1

您收到此错误是因为 isLoading 从 false 变为 true。当你声明isLoading时，他的默认值会是false。 DOM 没有时间处理 false 值，当您的 observable 结束时它变为 true。

RxJS 是严格顺序的，订阅是同步发生的。

一个解决方案是用 setTimeout() 或 NgZone.run().

包装你的变量

您也可以使用 subscribeOn(async) 运算符对 rxjs 执行此操作。

import { asyncScheduler } from 'rxjs';
import { observeOn } from 'rxjs/operators';
...
getIsLoading$(): Observable<boolean> {
  return this.isLoading.asObservable()
  .pipe(observeOn(asyncScheduler);
}

PS ：您应该以 $ (isLoading$)

结束可观察对象的名称

Angular 微调器在 http 请求上异步

Angular spinner async on http request

loader

observable

angular