Angular-加载程序出现控制台错误但工作正常

时间:2020-06-02 11:41:48

标签: angular typescript angular9

我正在尝试为我的角度组件设置一个应用程序加载器。一切正常,但在console.log

中出现此错误

ExpressionChangedAfterItHasBeenCheckedError:表达式已更改 经过检查。先前的值:“ true”。当前值:“ false”

该错误仅发生在子组件上,而不发生在主要组件上,例如,在我的应用程序组件中,我初始化了一些服务(这不会引发任何错误)。

 this.stateService.appLoading = true;
      await Promise.all([
        this.authService.listenForAuthStateChanges(),
        this.activityService.initialize(),
        this.ecoService.initialize(), // start the eco service
        this.newsService.initialise(),
        this.trainingService.initialize(),
        this.cartService.initialize(),
        this.routerService.initialize(),
        this.careerService.initialise(),
        this.aboutService.initialize(),
      ]).then(() => {
        this.stateService.appLoading = false;
      })

在我的子组件中(以下导致控制台错误,但加载器正常工作

async ngOnInit() {
    this.stateService.componentLoading = true;
    this.initializeData().then(() => {
      this.stateService.componentLoading = false;
    });
  }

和布局component.ts中,我隐藏并显示了加载器,如下所示:

get loading$() {
    return combineLatest(
      this.stateService.appLoading$,
      this.stateService.componentLoading$,
      (appLoading, componentLoading) => (appLoading || componentLoading)
    )
  }

-在html中

<app-preloader *ngIf="loading$ | async"></app-preloader>

我真的不明白怎么了。我尝试调用应用程序ref来勾选服务中的更改,但出现了递归错误。

0 个答案:

没有答案