表格角度材料分页无法按预期工作

Question

我正在使用Angular Material Table 创建一个表

我希望表格具有分页功能，以便用户可以转到首选页面并重新排列要显示的页面，如下所示：

Material data table

这是我目前所拥有的：

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>

这里有一个转到页面的方法：

组件.ts

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

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

  clearManualPage() {
    this.manualPage = null;
  }

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

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

Answer 1

我找到了解决方案，也许有人会对未来感兴趣

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 部分

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

现在转到页面或跳转到页面完美工作

Answer 2

试试这段代码：

<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>

请告诉我这是否有效。