Angular ExpressionChangedAfterItHasBeenCheckedError

Question

我的数据表有问题。当我加载数据时，我想显示忙指标。这是通过this.loading传递到DataTableComponent来实现的。一切正常（在页面之间切换，搜索），但是当我更改pageSize（同样的方法加载）时，我得到 ExpressionChangedAfterItHasBeenCheckedError

我有 VendorsComponent ，其中包含方法加载

load(loadParams: IDatatableLoadEvent): void {
   this.loading = true;
    this.vendorService.loalAll(loadParams.sortBy, loadParams.currentPage, loadParams.pageSize, loadParams.searchTerm, loadParams.sortOrder.toLowerCase())
    .subscribe((res: HttpResponse<IVendor[]>) => {
      this.filteredData = res.body;

      // we have to set x-pagination to COSR rules on API server
      const xPagination = res.headers.get('x-pagination');
      this.filteredTotal = JSON.parse(xPagination).totalCount;

      this.loading = false;
      // Hack - because we are setting loading and until data are loaded
      // we have to stop changeDetection and tell angular when to detect changes
      // - this happens only when we are changing pagesize
      this.cdr.detectChanges();
    }, error => {
      this.loading = false;
    });
  }

以下是dataTable组件中如何实现加载栏：

我在Demo创建了一个简单示例，但它没有加载数据，因此您无法尝试异常。但这对于更好的概述来说已经足够了。

我找到了解决此问题的方法 - 手动设置更改检测，但我想知道这是否是正确的方法。