表角材料分页无法正常工作 [英] Table angular material pagination does not work as expected

问题描述

我正在使用 Angular Material Table

我希望表格具有分页功能，以便用户可以转到首选页面并重新排列要显示的页面，就像这样:

I want the table to have pagination so that user can go to preferred page and rearrange page to be displayed, something like this one:

材料数据表

这是我到目前为止所拥有的:

Here is what I have so far:

HTML

<div class="mat-elevation-z8">
    <table cellspacing='2' cellpadding='40' mat-table [dataSource]="dataSource" matSort>
  <!--Tv Posters-->
  <ng-container matColumnDef="poster">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Poster </th>
      <td mat-cell *matCellDef="let row">
          <img 
           *ngIf="row.poster_path" 
            class="thumbnail" 
            src="http://image.tmdb.org/t/p/w500/{{row.poster_path}}">
        </td>
    </ng-container>
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
      </ng-container>

      <!-- ID Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
      </ng-container>

      <!-- Release date -->
      <ng-container matColumnDef="release">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Release</th>
        <td mat-cell *matCellDef="let row"> {{row.first_air_date}} </td>
      </ng-container>

      <!-- Description Column -->
      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
        <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.overview}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;">
      </tr>
    </table>
  <div class="row pagination">
    <div class="col page-select">
      <div class="label">Go to page:</div>
      <mat-form-field>
        <mat-select [ngModel]="manualPage" (ngModelChange)="updateManualPage($event)">
          <mat-option [value]="1">1</mat-option>
          <mat-option [value]="2">2</mat-option>
          <mat-option [value]="3">4</mat-option>
          <mat-option [value]="5">5</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="col-md-auto">
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
  </div>
  </div>
  </div>

以下是转到页面的方法:

Here a method for go to page:

component.ts

component.ts

...........
manualPage: null;
...........

 updateManualPage(index) {
    this.manualPage = index;
    this.paginator.pageIndex = index - 1;
  }

  clearManualPage() {
    this.manualPage = null;
  }

不幸的是，当我选择一个页面时，例如，我现在只能重新排列要在表格中显示的页面. 2按照规定没有任何反应.

Unfortunately right now I can only rearrange the pages to be displayed in my table, when I select a page e.g. 2 as specified nothing happen.

我在这里做错了什么?有什么建议吗?

What am I doing wrong here? Any suggestion?

推荐答案

我发现该解决方案也许对未来有兴趣

I found the solution maybe some one will be interested in future

HTML分页部分

<div class="row pagination">
    <div class="col page-select">
      <div class="label gotoPage">Go to page:</div>
      <mat-form-field>
          <mat-select [(ngModel)]="manualPage" (ngModelChange)="updateManualPage($event)">
              <mat-option [value]="1">1</mat-option>
              <mat-option [value]="2">2</mat-option>
              <mat-option [value]="3">3</mat-option>
              <mat-option [value]="4">4</mat-option>
              <mat-option [value]="5">5</mat-option>
          </mat-select>
      </mat-form-field>
    </div>
    <div class="col-md-auto">
    <mat-paginator 
        [pageSize]="5" 
        [pageIndex]='0'
        [pageSizeOptions]="[5, 10, 20]" 
        (page)="clearManualPage()">
    </mat-paginator>  
  </div>
  </div>

compo.ts部分

compo.ts part

public updateManualPage(index: number): void {
    this.manualPage = index;
    this.paginator.pageIndex = index;
    this.paginator.page.next({
      pageIndex: this.paginator.pageIndex,
      pageSize: this.paginator.pageSize,
      length: this.paginator.length
    });
  }
  public clearManualPage(): void {
    this.manualPage = 0;
  }

现在转到页面或跳转到页面效果很好

Now go to page or jump to page works perfectly

这篇关于表角材料分页无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！