我有一个 angular 分页器，它在使用 ngIf 显示和隐藏它时停止工作

Question

这是问题的演示 - https://stackblitz.com/edit/angular-rtucth?file=src/app/table-pagination-example.html

重现步骤：

1. 注意分页器显示 1-5 of 20
2. 单击标有 show or hide using ngIf 的按钮隐藏 table
3. 单击标记为 show or hide using ngIf 的按钮以显示 table
4. 注意分页器现在显示 0 of 0

为什么分页器再次显示时停止工作？

Answer 1

这是因为您删除了分页器。当你 ngIf 它再次进入视图时，视图中的分页器不再是你调用时的相同分页器实例 ngAfterViewinit()

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    //Assigning original paginator!
    this.dataSource.paginator = this.paginator; 
  }

所以你最终得到的分页器在视图中不再存在以绑定到 MatDataSource

为了克服这个问题，您可以更改为 QueryList 并在新分页器进入视图时分配分页器。

例如

@ViewChildren(MatPaginator) paginator: QueryList<MatPaginator>;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator.first;
    this.paginator.changes.subscribe(() => {
      this.dataSource.paginator = this.paginator.first;
    });
  }

https://stackblitz.com/edit/angular-rtucth-d2fpth?file=src%2Fapp%2Ftable-pagination-example.ts

另一种方法是将 set/get 访问器添加到每组的分页器字段重新分配。

这一切都归结为同一件事 - 重新分配当前进入视图的分页器

Answer 2

您正在销毁组件并创建一个新组件。 您在组件初始化中设置的引用不再可用。

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
}

您需要使用 [hidden] 属性而不是 *ngIf 来实现您的预​​期。