Question

我想要一个选项来显示表格中的所有行。 Angular Material仅支持页面大小选项的数字。我需要这样的东西：

[pageSizeOptions]="[5, 10, 25, 50, 100, 'All']"

Answer 1

你可以试试这个：

[dataSource] = "dataSource"
...
[pageSizeOptions] = "[5, 10, 25, 50, 100, dataSource.data.length]"

Answer 2

请查看实际结果 https://stackblitz.com/edit/angular-hpnbha-z4l4zf?file=app/table-pagination-example.ts

1）table-pagination-example.html

<mat-paginator [pageSizeOptions]="getPageSizeOptions()

2）table-pagination-example.ts

maxall : number=20;
ngOnInit() {
this.dataSource.paginator = this.paginator;
}
getPageSizeOptions(): number[] {
if (this.dataSource.paginator.length>this.maxall)
return [5, 10, 20,  this.dataSource.paginator.length];
else
return [5, 10, 20, this.maxall];
}
}

3）style.css

mat-option:last-child:before{
content: 'All';
float: left;
text-transform: none;
top: 4px;
position: relative;
}
mat-option:last-child .mat-option-text{
display: none;
position: relative;
}

Answer 3

您可以在mat-paginator下的组件html文件中尝试以下操作： “ [pageSizeOptions]="getPageSizeOptions()”

然后在您的css文件中添加以下CSS，这将使用“所有”文本来更改总长度变量内容：

mat-option:last-child:before{
    content: 'All';
    float: left;
    text-transform: none;
    top: 4px;
    position: relative;
}
mat-option:last-child .mat-option-text{
  display: none;
  position: relative;
}

在组件.ts文件中：

getPageSizeOptions(): number[]{
    console.log(this.paginator.length);
    if(this.paginator.length>this.maxperpage)
    return [5, 10,50,this.maxperpage, this.dataSource.data.length];
    else
    return [5,10,50, this.maxperpage];
  }

希望这会有所帮助！

Answer 4

演示： https://stackblitz.com/edit/angular-hpnbha-5ewyqw?file=app%2Ftable-pagination-example.html （由rahul裁缝的答案分叉）

如果后端具有非可选的分页，则要将页面大小发送到API。

因此，您必须提前知道参数。在这种情况下，您可以使用Java的最大Integer值（2'147'483'647）（或其他适合您情况的限制）

此解决方法仅会更改标签，在后台使用您预定义的最大值。

component.html

<mat-paginator (page)="paginatorHtmlElement.nativeElement.querySelector('div.mat- 
    select-value > span > span').innerHTML = paginator.pageSize == 2147483647? 'All': paginator.pageSize" 
    #paginator #paginatorElement
    [length]="dataSource.totalItemCount 
    [pageIndex]="0" [pageSizeOptions]="[5, 10, 25, 50, 100, 2147483647]" 
    [pageSize]="10">
</mat-paginator>

component.ts

@ViewChild(MatPaginator)
paginator: MatPaginator;
@ViewChild('paginatorElement', {read: ElementRef})
paginatorHtmlElement: ElementRef;

全局样式表（styles.css）

mat-option[ng-reflect-value='2147483647'] > span {
   display: none;
}

mat-option[ng-reflect-value='2147483647']:last-child:after {
   content: 'Max' !important;
   visibility: visible !important;
   display: block !important;
   position: absolute !important;
   background-color: transparent !important;
}`

它仍然是一种解决方法，但是它还允许您使用较大的页面大小选项（例如10000）作为最大大小，并以更具可读性的方式显示它。

如果您使用其他值作为最大页面大小，只需替换我的代码段中的值2147483647。

Answer 5

使用CSS选择器，例如：

mat-option[ng-reflect-value='2147483647']:last-child:after

在生产环境中不起作用，因为将代码编译到生产环境时，您将失去唯一的选择器。

Answer 6

由于 GET 的加载时间，上述许多答案不适用于从数据库调用的数据。有些有一堆不需要的代码和 CSS...我所做的如下：

在您的分页器模板中：

<mat-paginator [pageSizeOptions]="!pageLoading ? getPageSizes() : [5, 10, 20]"></mat-paginator>

然后在 .ts 文件中：

getPageSizes(): number[] {
    if (this.dataSource.data.length > 20) {
      return [5, 10, 20, this.dataSource.data.length];
    }
    else {
     return [5, 10, 20];
    }
  }

最后是 .css 文件：

::ng-deep mat-option:last-child:before{
  content: 'All';
}
::ng-deep mat-option:last-child .mat-option-text{
  display: none;
}

我注意到有时我放在垫子上的样式（无论什么）类有时不起作用。 ::ng-deep 修复了这个问题，并确保您的样式会影响它。

lambda 表达式会检查您的页面是否正在加载数据，如果是，则有一些“默认”选项。如果没有，因此如果填充了数据源，它将调用该函数并显示默认选项+“全部”选项。 pageLoading 只是一个布尔值，我最初将其设置为 TRUE，然后在对我的服务的调用的订阅中在最后但仍在订阅函数中，我将 pageLoading 设置为 FALSE。由于获取它的加载时间以及数据源长度为空，上述答案不适用于数据库数据。因此，除非您的数据是硬编码的……否则上面的答案可能不起作用（很好）。

如何添加＆＃39; All＆＃39; Angular Material paginator的选项？

6 个答案: