隐藏 MatPaginator 详细信息

Question

我试图隐藏由 MatPaginator 自动添加的字符串（每页项目数：1 1 \xe2\x80\x93 1 of 2），我尝试通过设置display:none;或display:none !important;到容器类来执行 CSS 方式，但这不起作用：

\n\n

.mat-paginator-page-size{\n    display: none !important;\n}\n\n.mat-paginator-range-label{\n    display: none !important;\n}\n

\n\n

我只想显示下一个和上一个箭头，而不显示任何其他详细信息。

\n

Answer 1

该属性的正确用法是：

<mat-paginator hidePageSize="true">

原因是您不必使用带有布尔值的括号。如果不初始化 TS 文件中的布尔值，则可能会导致 ExpressionChangedAfterItHasBeenCheckedError，即在更改检测完成后表达式值发生更改。因此，如果您决定使用带有括号的属性，请尝试以下操作：

isHidePageSize: boolean = true;

<pre>
 <mat-paginator [hidePageSize]="isHidePageSize">
</pre>

对于任何其他具有布尔值的属性也是如此。

Answer 2

您还可以创建一个CustomMatPaginatorIntl，并重写函数getRangeLabel。创建 CustomMatPaginatorIntl 只是编写一个从 MatPaginatorIntl 扩展的类

\n\n

export class CustomMatPaginatorIntl extends MatPaginatorIntl {\n  getRangeLabel=(page:number, pageSize:number, length:number)=>{\n    return ''\n\n  }\n}\n

\n\n

并用作提供者

\n\n

providers:[{provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl}]\n

\n\n

（如果您在组件中用作提供程序，则组件中的所有分页器不会显示任何内容，如果您在模块中使用作为提供程序，则属于该模块的组件中的所有分页器不会显示任何内容）

\n\n

笔记。在函数中：

\n\n

//the first showed page is: (1+page*pageSize)\n//the last showed page is : (1+page)*pageSize\n//the total page is:length\n//so we can return some like\nreturn (1+page*pageSize)+' - '+(1+page)*pageSize+' p\xc3\xa1g/'+(length)\n

\n