Question

我有一个角度为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;
  }

我的layout.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

由于角度6中的加载器拦截器，导致ExpressionChangedAfterItHasBeenCheckedError错误

1 个答案: