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

Posted 2023-03-05

【中文标题】表格角度材料分页无法按预期工作

【英文标题】：Table angular material pagination does not work as expected

【发布时间】：2019-01-03 16:24:27

【问题描述】：

我正在使用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 指定没有任何反应。

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

【参考方案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;
  

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

【参考方案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>

请告诉我这是否有效。

【讨论】：

这根本不起作用，你改变了什么？看起来和以前一样

只是固定结束标签

兄弟，你在那个代码中做了什么改变？你没有像以前一样改变任何东西，因为它不起作用

兄弟 ngModel 的双引号没有关闭，我在更新中修复了这个问题

让我们continue this discussion in chat。