角度材料分页器无法设置页面大小答案

【问题标题】：angular material paginator can't set the page size角度材料分页器无法设置页面大小
【发布时间】：2019-11-01 20:01:00
【问题描述】：

我正在使用 Angular Material 分页器。

<div style="  display:block;">
  <mat-table [dataSource]="dataSource" matSort>

    <ng-container *ngFor="let col of dataDisplayedColumns" [matColumnDef]="col">
       <mat-header-cell class="table-header header-p" *matHeaderCellDef>
         <b>{{ col }}</b> 
       </mat-header-cell>
       <mat-cell class="table-content context-position" *matCellDef="let element">
        {{ element[col] }}
       </mat-cell>
     </ng-container>

     <mat-header-row class="table-header header-p-row" *matHeaderRowDef="dataDisplayedColumns"></mat-header-row>
     <mat-row matRipple 
       [ngClass]="((row['num']%2) == 1) ? 'row-single' : 'row-double'" 
       *matRowDef="let row; columns: dataDisplayedColumns;">
     </mat-row> 
 </mat-table>

</div>
<mat-paginator #paginator class="paginator" 
  [pageSize]="10" 
  [hidePageSize]="true" 
  [pageSizeOptions]="[5, 10, 20]" 
  showFirstLastButtons>
</mat-paginator>

代码如下所示。

dataDisplayedColumns: string[] = [];
@ViewChild(MatPaginator) paginator: MatPaginator;
dataSource = new MatTableDataSource<any>();
page = 1;
pageSize = 10;

var self = this;
this.dataSourceService.getConnectionData(connection)
    .pipe(takeUntil(this._unsubscribeAll))
    .subscribe( (res: any) =>{
  if(res.data.length > 0) {
    console.log(Object.keys(res.data[0]));
    self.dataDisplayedColumns = Object.keys(res.data[0]);
    self.dataSource = new MatTableDataSource(res.data);
    self.paginator.length = res.count;
    self.paginator.pageSize = 10;
    console.log(self.dataSource.data);
  }
},err => {
  console.log(err);
});

问题在于我如何设置 paginator 的 pageSize 值

<mat-paginator #paginator class="paginator"  [pageSize]="10" [hidePageSize]="true" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

或者使用代码设置pageSize为10

self.paginator.pageSize = 10;

当 paginator 的 pageSize 设置为 10 时，表格仍然显示页面上的所有数据。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

    dataDisplayedColumns: string[] = [];
    @ViewChild(MatPaginator) paginator: MatPaginator;
    dataSource = new MatTableDataSource<any>();
    page = 1;          //i think this
    pageSize = 10;     //and this are not used anywhere

    var self = this;
    this.dataSourceService.getConnectionData(connection)
                     .pipe(takeUntil(this._unsubscribeAll))
                     .subscribe( (res: any) =>{
    if(res.data.length>0){
      console.log(Object.keys(res.data[0]));
      self.dataDisplayedColumns = Object.keys(res.data[0]);
      self.dataSource = new MatTableDataSource(res.data);
      self.paginator.length = res.count;
      self.paginator.pageSize = 10;
      self.dataSource.paginator = self.paginator;  //assigning paginator to dataSource
      console.log(self.dataSource.data);
       }
    },err => {
     console.log(err);
    });

您必须将分页器分配给数据源

尝试添加 self.dataSource.paginator = self.paginator; 到你的代码

【讨论】：