时间戳

首页 > 解决方案 > 在单击按钮时加载数据时 mat-paginator 不起作用

angular - 在单击按钮时加载数据时 mat-paginator 不起作用

问题描述

我正在尝试使用mat-paginator ，其中数据是在单击提交按钮时从服务动态加载的。出于某种原因，所有数据都加载到了第一页，并且分页似乎不起作用。我还有另一个按钮（刷新），可以从后端服务获取数据并再次加载表。单击此按钮时，分页似乎工作正常。我已经尝试了stackoverflow中其他问题中提供的所有解决方案，但似乎都没有解决问题。请参阅下面的相关代码片段，让我知道您的建议，

HTML

        <nb-tab tabTitle="Transactions">

        <div class="mat-elevation-z8">
            <mat-paginator [length]="this.dataLength" [pageSize]="5" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>

            </mat-paginator>
            <table *ngIf="rewardsFound" mat-table [dataSource]="dataSource">

                <!--- Note that these columns can be defined in any order.
                      The actual rendered columns are set as a property on the row definition" -->

                <!-- Position Column -->
                <ng-container matColumnDef="transactionDt">
                  <th mat-header-cell *matHeaderCellDef> Transaction Dt. </th>
                  <td mat-cell *matCellDef="let element"> {{element.transactionDt}} </td>
                </ng-container>

                <!-- Name Column -->
                <ng-container matColumnDef="transactionType">
                  <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
                  <td mat-cell *matCellDef="let element"> {{element.transactionType}} </td>
                </ng-container>


                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

              </table>         

        </div>


          <div *ngIf="!rewardsFound">
            <label class="label col-form-label-field">No transaction history found for this member</label>
          </div>     
    </nb-tab>

组件 TS

  dataSource = new MatTableDataSource()
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;

    this.loading = true

    this.getService.getTransHistory(this.InputData)
    .subscribe (
      (data:Histarray)=>{
      if (data.responseStatus == "001") {
          this.dataSource = new MatTableDataSource(data.HistOut)
          setTimeout(() => this.dataSource.paginator = this.paginator)
          this.dataLength = data.rewardHistCount
        } else if (data.responseStatus == "004") {
          this.dataSource = new MatTableDataSource()
          this.dataLength = 0
        }
      },
      (err:any)=>{
        this.loading = false
        this.memberFound = true
        this.searchDone = true
      }
    )
  }

标签： angular

解决方案

看起来分页器在初始加载期间分配给您的数据源时仍然未定义，因此表没有分页。

以下方法将在 paginator 元素初始化时分配 paginator 并且应该解决您的问题，

_paginator: MatPaginator;

@ViewChild(MatPaginator,  {static: false}) set matPaginator(paginator: MatPaginator) {
   this._paginator = paginator;

   if (this.dataSource) {
       this.dataSource.paginator = paginator;
   }
}

在重新加载数据使用期间this._paginator

推荐阅读