Question

我正在使用有角度的材料分页器。

<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);
});

问题是无论我如何在

中设置分页器的pageSize值

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

或使用代码将pageSize设置为10

 self.paginator.pageSize = 10;

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

Answer 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);
    });

您必须将分页器分配给dataSource

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

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

1 个答案: