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>

我的方法init在我的组件:

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

My Loader service:

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值，当你的可观察对象结束时，它就变成了true。

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

一个解决方案是用setTimeout()或NgZone.run()包装变量。

你也可以在rxjs中使用subscribeOn(async)操作符。

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

PS:你应该以$ (isLoading$)结束可观察对象的名称