paginator угловой материал не может установить размер страницы - PullRequest
Новая
       6

paginator угловой материал не может установить размер страницы

0 голосов
/ 01 ноября 2019

Я использую угловой материал для разбивки на страницы. 

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

Проблема не в том, как я настраиваю страницу paginatorSizeзначение в 

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

или использование кода для установки pageSize как 10 

 self.paginator.pageSize = 10;

В таблице по-прежнему отображаются все данные на странице, в то время как paginator's pageSize установлен в 10. enter image description here

1 Ответ

1 голос
/ 02 ноября 2019 
    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);
    });

вы должны назначить paginator для источника данных

попробуйте добавить self.dataSource.paginator = self.paginator; в ваш код

...