具有不同表库的角度材料分页

Question

所以，我为我的表使用了这个不同的表库并创建了一个自定义分页器。我想在表格中使用这个 paginator-goto。我如何使用分页器来工作表。 该表是一个自定义表库，因此我不确定如何将数据源与分页一起使用。当我单击下一个或上一个时，我只需要分页来响应。 这是分页演示。 https://stackblitz.com/edit/mat-paginator-with-goto-5fxwvm?file=src/app/mat-paginator-goto/mat-paginator-goto.component.html

Answer 1

要更改的“标签”，docs（参见国际化示例）指示如何更改“工具提示”

添加一个 MyCustomPaginatorIntl

export class MyCustomPaginatorIntl implements MatPaginatorIntl {
  changes = new Subject<void>();

  firstPageLabel = "First page"
  itemsPerPageLabel = "Items per page:"
  lastPageLabel = "Last page:"

  nextPageLabel = "Next";
  previousPageLabel = "Previous";
  getRangeLabel(page: number, pageSize: number, length: number): string {
    if (length === 0) {
      return "Page 1 of 1";
    }
    const amountPages = Math.ceil(length / pageSize);
    return `Page ${page + 1} of ${amountPages}`;
  }
}

并用作提供者 - 您可以在 app.module 或您的组件中执行此操作

providers:[{provide:MatPaginatorIntl,useClass:MyCustomPaginatorIntl}],

但是如果我们想改变“”，我们需要使用类

我们可以在 style.css 中编写 - 如果我们不为所有应用程序使用样式，则无法正常工作

.mat-paginator-navigation-next .mat-button-wrapper,
.mat-paginator-navigation-previous .mat-button-wrapper
{
  color:transparent!important;
}
.mat-paginator-navigation-previous
{
  width:5em!important;;
}
.mat-paginator-navigation-next::after{
  content:attr(aria-label);
  margin-left:-2em;
}
.mat-paginator-navigation-previous::after{
  content:attr(aria-label);
  margin-left:-2em;
}

在stackblitz 中是一个使用 ashraful Islam 的自定义分页器的示例

更新当我们更改数据源时，我们需要“手动更新”分页器。好吧，它与另一个没有什么不同。我们可以使用 ViewChild 来获取 MatPaginatorGotoComponent

  @ViewChild(MatPaginatorGotoComponent) paginator

而且，当我们更改我们可以使用的数据时，例如

this.paginator.pageIndex=0;
this.paginator.goTo=1

或者

if (this.paginator.pageIndex*this.paginator.pageSize>this.data.length)
{
    const pageIndex=Math.ceil(this.data.length / this.paginator.pageSize)-1
    this.paginator.pageIndex=pageIndex
    this.paginator.goTo=pageIndex+1
}