html - 每页的垫子分页器项目在角度 9 中不起作用

Question

我正在从可观察对象呈现表数据，然后将数据源分配给分页器。下一页箭头以及第一页和最后一页按钮都在起作用。当我尝试更改每页的项目时，它不起作用。我尝试了 ngAfterViewInit 和页面事件调用，但它们没有任何区别。

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { DataserviceService } from 'src/app/dataservice.service';
import { DataProvider } from 'src/app/services/dataprovider';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';
import { SamastaDigitalPayDataModel } from 'src/app/services/model.interface';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-mis-dig-pay-report',
  templateUrl: './mis-dig-pay-report.component.html',
  styleUrls: ['./mis-dig-pay-report.component.css']
})
export class MisDigPayReportComponent implements OnInit  {

  showTable: boolean;
  choosenValue;
  dataSource;
  optionType: number;
  getby: string;
  date;
  maxDate: Object = new Date();
  blob: Blob;
  isClicked1: boolean = false;
  isClicked2: boolean = false;
  length;
  

  constructor(public datepipe: DatePipe, private service: DataserviceService, public dataProvider: DataProvider)  { }
  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

       
  displayedColumns = ["merchantName", "superMerchantName", "branchName","branchLoginId","fingpayTxnId","requestMethod", "requestBranchId", "requestAccountId", "requestLoanSeries", "requestStatus", "requestTimestamp","aadharNumber","upiId","cardScheme","cardNumber", "customerPhoneNumber","statusMessage","latitude","longitude","deviceImei","remarks","referenceId","orderId","terminalId"];
  ngOnInit(): void {
    // this.getTableData();
    // this.dataSource.paginator = this.paginator;

  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
  
 


  getDisplayedColumns() {
    return this.displayedColumns;
  }

  getTableData() {
    console.log(this.datepipe.transform(this.date[0], 'yyyy-MM-dd'))

    console.log(this.datepipe.transform(this.date[0], 'yyyy-MM-dd'))
    console.log("option",this.optionType)


    this.showTable= true;
    this.service.getMisDigitalPayments(this.datepipe.transform(this.date[0], 'yyyy-MM-dd'), this.datepipe.transform(this.date[1], 'yyyy-MM-dd') ).subscribe(

    response => {
        this.dataSource = new MatTableDataSource<SamastaDigitalPayDataModel>(response["data"]);
        this.length = response["data"].length;
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        console.log("table data",response["data"])
        console.log("choosen", this.choosenValue)
      }, 
      )
  }
  pageEvent(event){
    //it will run everytime you change paginator
    console.log("event")
      this.getTableData();
  }

  


 
  // downloadReport() {
  //   console.log("downloading")
  //   this.service.getDownloadBalanceInquiryReport(this.datepipe.transform(this.date[0], 'yyyy-MM-dd'), this.datepipe.transform(this.date[1], 'yyyy-MM-dd')).subscribe(response => {

  //     const blob = new Blob([response["data"]], { type: 'text/csv;charset=utf-8;' });
  //     console.log(blob)
  //     let link = document.createElement("a");
  //     let filename = "balance" + new Date().toLocaleString() + ".csv";
  //     var url = URL.createObjectURL(blob);
  //     link.setAttribute("href", url);
  //     link.setAttribute("download",filename);
  //     link.style.visibility = 'hidden';
  //     document.body.appendChild(link);
  //     link.download = filename;
  //     link.click();
  //     });
    
  // }

}

<h3 align="center"> Payment Report</h3>
<div class="container-fluid" style="font-size: 18px;margin-top: 20px;">
    <div class="row">
        <div class="col-lg-3 col-xs-6 col-sm-6 col-md-6">
            <ejs-daterangepicker placeholder="From and To Date"format='dd-MM-yyyy' [max]='maxDate' [(ngModel)]="date"></ejs-daterangepicker>
        </div>
        <div class=" col-lg-3 col-xs-6 col-sm-6 col-md-6">
            <button class="btn customBtn" (click)="getTableData(); ">Get Report</button>
        </div>
    </div>
</div>

<div [hidden]="!showTable">
    <div class="text-right">
        <mat-form-field>
            <input class="inputSearch" matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
        </mat-form-field>
    </div>
   
    <div class=" col-lg-3 col-xs-6 col-sm-6 col-md-6" >
        <div class="btn-group-export" style="margin-top: 15px;">
            <button id="exportBtn1"  (click)="exporter.exportTable('csv', {fileName:'MISDigitalPaymentReport'}); isClicked1 = true; isClicked2 = false;"  [ngClass]="{'set-color-export': isClicked1 }">Export to csv</button>
            <button id="exportBtn2"  (click)="exporter.exportTable('xlsx', {fileName:'MISDigitalPaymentReport'}); isClicked1 = false; isClicked2 = true;" [ngClass]="{'set-color-export': isClicked2 }">Export to xlsx</button>
        </div>
    </div>
    <div style="overflow: auto;">

    <table mat-table [dataSource]="dataSource" class="tableCss table-striped" style="width: 100%;" matSort matTableExporter    #exporter="matTableExporter" >
    
        <ng-container matColumnDef="merchantName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Employee Name </th>
            <td mat-cell *matCellDef="let element">{{element.merchantName}} </td>
        </ng-container>
        <ng-container matColumnDef="branchName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Branch Name </th>
            <td mat-cell *matCellDef="let element">{{element.branchName}} </td>
        </ng-container>

        <ng-container matColumnDef="branchLoginId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Branch Login Id </th>
            <td mat-cell *matCellDef="let element">{{element.branchLoginId}} </td>
        </ng-container>
        <ng-container matColumnDef="fingpayTxnId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Fingpay Txn Id </th>
            <td mat-cell *matCellDef="let element">{{element.fingpayTxnId}} </td>
        </ng-container>
        <ng-container matColumnDef="superMerchantName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Corporate Name </th>
            <td mat-cell *matCellDef="let element">{{element.superMerchantName}} </td>
        </ng-container>
        <ng-container matColumnDef="requestMethod">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Request Method </th>
            <td mat-cell *matCellDef="let element"> {{element.requestMethod}}</td>
        </ng-container>
        
        <ng-container matColumnDef="requestBranchId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header align="center"> Request Branch Id </th>
            <td mat-cell *matCellDef="let element"> {{element.requestBranchId}} </td>
        </ng-container>
        
    
        <ng-container matColumnDef="requestAccountId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Request Account Id </th>
            <td mat-cell *matCellDef="let element"> {{element.requestAccountId}} </td>
        </ng-container>
    
        <ng-container matColumnDef="requestLoanSeries">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Request Loan Series</th>
            <td mat-cell *matCellDef="let element"> {{element.requestLoanSeries}} </td>
        </ng-container>
    
        <ng-container matColumnDef="requestStatus">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Request Status </th>
            <td mat-cell *matCellDef="let element"> {{element.requestStatus}} </td>
        </ng-container>
        
        
        <ng-container matColumnDef="requestTimestamp">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Request Timestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.requestTimestamp}} </td>
        </ng-container>

        
        <ng-container matColumnDef="aadharNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Aadhar Number </th>
            <td mat-cell *matCellDef="let element"> {{element.aadharNumber}} </td>
        </ng-container>

        <ng-container matColumnDef="cardAcceptorTerminalIdentification">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> cardAcceptorTerminalIdentification </th>
            <td mat-cell *matCellDef="let element"> {{element.cardAcceptorTerminalIdentification}} </td>
        </ng-container>
       
        <ng-container matColumnDef="upiId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> UpiId </th>
            <td mat-cell *matCellDef="let element"> {{element.upiId}} </td>
        </ng-container>
        
        <ng-container matColumnDef="cardScheme">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Card Scheme </th>
            <td mat-cell *matCellDef="let element"> {{element.cardScheme}} </td>
        </ng-container>
        <ng-container matColumnDef="cardNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Card Number </th>
            <td mat-cell *matCellDef="let element"> {{element.cardNumber}} </td>
        </ng-container>
        <ng-container matColumnDef="customerPhoneNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Customer PhoneNumber </th>
            <td mat-cell *matCellDef="let element"> {{element.customerPhoneNumber}} </td>
        </ng-container>
        <ng-container matColumnDef="statusMessage">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Status Message </th>
            <td mat-cell *matCellDef="let element"> {{element.statusMessage}} </td>
        </ng-container>
        <ng-container matColumnDef="latitude">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Latitude </th>
            <td mat-cell *matCellDef="let element"> {{element.latitude}} </td>
        </ng-container>
        <ng-container matColumnDef="longitude">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Longitude </th>
            <td mat-cell *matCellDef="let element"> {{element.longitude}} </td>
        </ng-container>
        <ng-container matColumnDef="deviceImei">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Device Imei </th>
            <td mat-cell *matCellDef="let element"> {{element.deviceImei}} </td>
        </ng-container>
        <ng-container matColumnDef="remarks">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Remarks </th>
            <td mat-cell *matCellDef="let element"> {{element.remarks}} </td>
        </ng-container>
        <ng-container matColumnDef="referenceId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Reference Id </th>
            <td mat-cell *matCellDef="let element"> {{element.referenceId}} </td>
        </ng-container>
        <ng-container matColumnDef="orderId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Order Id </th>
            <td mat-cell *matCellDef="let element"> {{element.orderId}} </td>
        </ng-container>
        <ng-container matColumnDef="terminalId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Terminal Id </th>
            <td mat-cell *matCellDef="let element"> {{element.terminalId}} </td>
        </ng-container>
       
    
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns:   getDisplayedColumns();"></tr>
    
    </table>
    </div>

    </div>
    <mat-paginator  #paginator  [pageSizeOptions]="[10, 20, 100]" showFirstLastButtons></mat-paginator>

标签： htmlangulartypescriptangular9mat-pagination

Answer 1

尝试将page事件链接到mat-paginator

<mat-paginator [length]="length" [pageSizeOptions]="[5, 10, 25]" [pageSize]="query.pageSize"
            (page)="onPaginateChange($event)"></mat-paginator>

在您的 .ts 文件上

 onPaginateChange($event) {
 console.log($event);
 }

尝试在此方法中调用您的函数并检查。