我正在从可观察对象呈现表数据，然后将数据源分配给分页器。下一页箭头以及第一页和最后一页按钮都在起作用。当我尝试更改每页的项目时，它不起作用。我尝试了 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>