angular - 检查异步后，表达式发生了变化？

Question

我尝试了stackoverflow的一些答案，但没有结果：

模板是：

<div class="overlay" *ngIf="isLoading() | async">

代码：

@Injectable({
    providedIn: 'root',
})
export class LoaderService {
    public countRequests = 0;
    private loading = new BehaviorSubject(false);

    get isLoading(): Observable<boolean> {
        return this.loading.asObservable();
    }

    start(): void {
        this.countRequests++;
        this.loading.next(true);
    }

    stop(): void {
        this.loading.next(false);
    }
}


   isLoading(): Observable<boolean> {
        return this.loaderService.isLoading;
    }

错误：

LoaderComponent.html:1 ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'ngIf: false'。当前值：'ngIf: true'。

我试图解决它传递默认值：

private loading = new BehaviorSubject(false);

标签： angular

Answer 1

而不是调用html模板中的方法。尝试在您的组件中创建一个 observable 并在 ngAfterViewInit() 方法中分配值并在您的 html 模板中使用该变量

模板：

<div class="overlay" *ngIf="isLoading | async">

代码：

isLoading = new BehaviorSubject(false);

ngAfterViewInit() {
  this.isLoading = this.loaderService.isLoading();
}