Angular Material 分页器 nextPage 被禁用

如何解决Angular Material 分页器 nextPage 被禁用

我从 graphql 调用中获得了总共 7 条记录。我在第 0 页显示 2 条记录。然后在每一页上我应该得到 2 条记录。分页器组件应该说 1-2 of7。但不知何故，它说 1-2 of 2 和下一个箭头被禁用。所以我无法向后端发送请求以获取下一页的数据。 我正在使用 mat-paginator 实现服务器端分页。 如何正确设置总计数以便启用我的下一个箭头。

HTML

  <mat-paginator
    #paginator
    (page)="PageEvents($event)"
  ></mat-paginator>

history.component.ts

import { SnackbarService } from './../../../shared/snackbar/snackbar.service';
import { AccountService } from './../../../services/account.service';
import {
  Component,OnInit,SimpleChanges,ViewChild,OnChanges,AfterViewInit,Input
} from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import {
  OidcSecurityService,PublicConfiguration,OidcclientNotification,} from 'angular-auth-oidc-client';
import { Observable } from 'rxjs';
import { HistoricalPaymentUsingGraphql } from '../../../Model/historical-payment-graphql.model';
import { HistoricalPayment } from '../../../Model/historical-payment.model';
import { ModelService } from '../../../services/model.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { merge } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { switchMap } from 'rxjs/operators';
import { catchError } from 'rxjs/operators';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-history',templateUrl: './history.component.html',styleUrls: ['./history.component.css'],})
export class HistoryComponent implements OnInit,OnChanges {
  @input() loanNumber: string;
  data: string[];
  output: HistoricalPaymentUsingGraphql[];
  pageSize: number;
  totalNumberOfRecords: number;
  pageNumber: number;
  configuration: PublicConfiguration;
  userDataChanged$: Observable<OidcclientNotification<any>>;
  userData: any;
  isAuthenticated$: Observable<boolean>;
  payments: HistoricalPaymentUsingGraphql[];
  greenHilightIdentifiers: string[] = ['SR','SRA','AP','RP','PA','SWA'];
  numberofLoanFeeTransactions: number;
  numberofPaymentTransactions: number;
  numberofPaymentsUnapplied:number;
  displayedColumns: string[] = [
    'transactionDate','identifier','description','effectiveDate','paidToDate','amountPosted','principalAmount','principalBalanceAfterTransaction','interestAmount','escrowAmount','escrowBalanceAfterTransaction','lateChargeAmount','unappliedFundsAmount','unappliedFundsBalanceAfterTransaction',];
  errorMessage: string;
  dataSource: MatTableDataSource<HistoricalPaymentUsingGraphql>;
  @ViewChild(MatPaginator,{ static: true }) paginator: MatPaginator;
  @ViewChild(MatSort,{ static: true }) sort: MatSort;
  constructor(
    public oidcSecurityService: OidcSecurityService,private spinner: NgxSpinnerService,private accountService: AccountService,private modelService: ModelService,private snackbarService: SnackbarService
  ) {
    
    this.pageNumber = 0;
    this.totalNumberOfRecords = 7;
  }

  ngOnInit(): void {
    this.pageNumber = 0;
    this.payments = [];
    this.configuration = this.oidcSecurityService.configuration;
    this.isAuthenticated$ = this.oidcSecurityService.isAuthenticated$;
    this.data = new Array();
    this.output = new Array();
    if (this.loanNumber === undefined) {
      return;
    }

    // this.accountService.getPaymentHistory(this.loanNumber).subscribe(
    //   (data) => {
    //     this.assignPayments(data.historicalPayments);
    //   },//   (error) => {}
    // );
    this.getPaymentHistory(this.loanNumber,this.pageNumber);
   // this.dataSource.paginator = this.paginator;
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.pageNumber = 0;
    this.payments = [];
    this.data = new Array();
    this.output = new Array();
    if (this.loanNumber === undefined) {
      return;
    }
 
    this.getPaymentHistory(this.loanNumber,this.pageNumber);
      
    this.modelService.updateModel();
    //this.dataSource.paginator = this.paginator;
  }

  PageEvents(event: any){
    console.log("event",event);
    const pageSize = event.pageSize; 
    const currentPage = event.pageIndex + 1; 
    this.getPaymentHistory('21',event.pageIndex);
   // this.defaultPayload.pageSize = pageSize;
   // this.defaultPayload.currentPage = currentPage;
   // this.getDataService(this.defaultPayload)
}

  
  getBackColor(identifier: string) {
    const searchTerm = identifier.trim();
    if (this.greenHilightIdentifiers.some((e) => e === searchTerm)) {
      return { 'background-color': '#cbf8cb' };
    }
    return { 'background-color': 'White' };
  }

  getPaymentHistory(loanNumber: string,pageNumber: number) {
    debugger;

   
      this.showSpinner();
      this.accountService.getPaymentHistoryUsingGraphql('1987074',pageNumber,2 ).subscribe(
        (data) => {
          debugger;
          this.totalNumberOfRecords = data.data.consolidatedPaymentTransactions.totalCount;
          this.paginator.length = this.totalNumberOfRecords;
          this.paginator.pageSize = 2;
          this.assignPayments(data.data.consolidatedPaymentTransactions.items);
       // this.numberofLoanFeeTransactions = data.data.loanFeeTransactions.items.length;
       // this.numberofPaymentTransactions = data.data.paymentTransactions.items.length;
        //this.numberofPaymentsUnapplied = data.data.paymentsUnapplied.items.length;
        console.log("Length - " + this.numberofPaymentTransactions);
       // this.assignPayments(data.data.loanFeeTransactions.items,//  data.data.paymentTransactions.items,data.data.paymentsUnapplied.items);
        this.hideSpinner();
        },(error) => {
          this.hideSpinner();
          this.showError('Failed to load Payment History');
        }
      );
      
  }

  private assignPayments(consolidatedPaymentTransactions: HistoricalPaymentUsingGraphql[]) {
    this.payments = consolidatedPaymentTransactions;
    this.updateDataSource(this.payments);
  }

  private updateDataSource(paymentList: HistoricalPaymentUsingGraphql[]) {
    this.dataSource = new MatTableDataSource(paymentList);
    this.dataSource.paginator = this.paginator;
    this.paginator.length = this.totalNumberOfRecords;
   // this.paginator.hasNextPage = true;
    this.dataSource.sort = this.sort;
    this.paginator.length = this.totalNumberOfRecords;
  }

  private getData(paymentList: HistoricalPaymentUsingGraphql[]) {
    debugger;
    for (let i = 0; i < paymentList.length; i++){
      var val = JSON.stringify(paymentList[i]);
      if(this.data.indexOf(val) < 0){
        this.data.push(val);
        this.output.push(paymentList[i]);
      }
  }
}
/** 
  onChangePage(event: PageEvent) {
    const pageSize = +event.pageSize; // get the pageSize
    const currentPage = +event.pageIndex + 1; // get the current page
   
    this.service.paginationData(pageSize,currentPage); // call the service
   }*/

  showSpinner() {
    this.spinner.show(undefined,{
      type: 'ball-spin-clockwise',});
  }

  hideSpinner() {
    this.spinner.hide();
  }

  private showError(error: string) {
    this.errorMessage = error;
    this.snackbarService.show(error,'danger');
  }
}