过滤时自定义 angular 指令中的分页不更新（How to customize mat-paginator in angular material）

Question

根据 Marshal 的回答，我已经在 angular material 数据 table 中实现了自定义指令。但是从 table 过滤数据时，我遇到了分页问题。过滤时分页不更新。

Answer 1

我们在制作滤镜的时候，无论如何都需要调用指令的“initPageRange”函数，所以首先我们需要获取“指令”。由于指令具有作为分页器的属性 “matPag”，我们可以在构造函数和函数 initPageRange

中创建 public 这个变量
~~constructor( @Host() @Self() @Optional() private readonly matPag: MatPaginator, private vr: ViewContainerRef, private ren: Renderer2 )~~

 //replace by
 constructor(
    @Host() @Self() @Optional() public readonly matPag: MatPaginator,
    private vr: ViewContainerRef,
    private ren: Renderer2
  )

等于函数

~~private initPageRange(): void { ... }~~

public initPageRange(): void {
  ...
}

我们将使用 ViewChild 获取“指令”，但我们需要获取 MatPaginator，因为分页器将是属性：matPag - 请参阅函数 ngOnInit()-

~~@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; ngOnInit() { this.dataSource.paginator = this.paginator; }~~

  @ViewChild(StylePaginatorDirective, { static: true }) paginator: StylePaginatorDirective;
  

  ngOnInit() {
    this.dataSource.paginator = this.paginator.matPag;
  }

最后是添加输入

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
</mat-form-field>

和函数applyFilter

applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
      setTimeout(() => {
        this.paginator.initPageRange();
      });
    }
  }

需要在 setTimeout 中包含函数 initPAgeRange 以在 Angular 刷新应用程序后执行

这是forked stackblitz

过滤时自定义 angular 指令中的分页不更新（How to customize mat-paginator in angular material）

Pagination doesn't update in customized angular directive when filtering (How to customize mat-paginator in angular material)

angular-directive

angular-material

angular