由于 Angular 6 中的加载程序拦截器，ExpressionChangedAfterItHasBeenCheckedError 错误

Question

我有一个 angular 6 项目。我创建了一个拦截器来显示“加载”面板。但是由于这个加载面板，我出现了这个错误。ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'我该如何解决这个问题？

我的拦截器

export class LoaderInterceptor implements HttpInterceptor {
  constructor(private ch: CommonHelper) { }

    intercept(request: HttpRequest < any >, next: HttpHandler): Observable < HttpEvent < any >> {
      this.ch.showLoader();
      return next.handle(request)
        .pipe(
          tap((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
              this.ch.hideLoader();
            }
          }, (error: any) => {
            if (error instanceof HttpErrorResponse) {
              this.ch.messageHelper.showErrorMessage('Error Occured');
            }
            this.ch.hideLoader();
          })
        );
    }
}

我的显示和隐藏方法

showLoader() {
    this.globals.displayLoader = true;
  }

hideLoader() {
    this.globals.displayLoader = false;
  }

我的布局.html

 <div class="loading-screen" *ngIf="ch.globals.displayLoader">
    <div class="loading-loader"></div>
 </div>

Answer 1

尝试将您的方法放在 setTimeout 中显示/隐藏，如下所示 -

setTimeout(() => {this.ch.hideLoader();}, 0)

有关更多解释，请参阅此处 -

• https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4