无法修复ExpressionChangedAfterItHasBeenCheckedError

Question

我正在构建自己的PaginatorComponent。我需要将PaginatorComponent包装在我自己的基于应用的MyPaginatorComponent中。 我收到ExpressionChangedAfterItHasBeenCheckedError，但不知道如何解决。

这是堆积如山的再现：https://stackblitz.com/edit/angular-f28v5j?file=src%2Fapp%2Fmy-paginator.component.ts

有人可以帮忙吗？

Answer 1

不太难。

将分页器组件的第47行从this.currentPage = 1;更改为this._currentPage = 1;

Answer 2

简单的超时即可解决您的问题：stackblitz

onPageChange(page: number) {
  setTimeout(() => {
    this.current = page;
    this.page.emit(page);
  });
}

如果要查找问题，则必须查看设置当前页面的位置（因为错误明确指出了当前页面是问题），并检查其在生命周期中是否多次未更改。

我也将为您查找它，但是现在，您可以使用此方法解决问题。

编辑，您的错误来自以下代码：

@Input() set pageSize(i: number) {
  this._pageSize = i;
  this.currentPage = 1;
  this.calculatePages();
}

您不必使用吸气剂，而不必直接使用私有属性_currentPage。