Angular pagination
Всем привет! Помогите плиз. Не могу понять в чем проблема. Делаю пагинацию, сейчас она не работает. При любом выборе на станице всегда отображаются все данные. Где я допускаю ошибку или может чего забыл учесть???
**component.ts:**
export class ProblemsConsumeStatusTabComponent implements OnInit {
tableColumns: TableData = {
displayName: ['Cluster', 'Node', 'Path', 'Version', 'Date', 'Orphan'],
displayValue: ['cluster', 'node', 'path', 'version', 'date', 'orphan']
};
dataSource: FailedConsumeData[];
cluster: string = "";
node: string = "";
path: string = "";
orphan: boolean = false;
length: number;
paginatorData: PaginatorData = {
page: 0,
pageSize: 10,
currentPageSize: 10,
pageIndex: 0,
};
pageSizeOptions: number[] = [10, 20, 40, 100];
constructor(private problemsService: ProblemsService, private paginatorHelper: PaginatorHelperService) {
this.getData();
}
ngOnInit() {
}
clusterFilter(clusterValue) {
this.cluster = clusterValue;
this.getData();
}
nodeFilter(nodeValue) {
this.node = nodeValue;
this.getData();
}
pathFilter(pathValue) {
this.path = pathValue;
this.getData();
}
orphanChanged(orphanValue) {
this.orphan = orphanValue;
this.getData();
}
clearOrphanStatus(){
this.orphan=false;
this.getData();
}
getFailedData(pageData) {
this.paginatorHelper.handlePageData(this.paginatorData, pageData);
this.getData();
}
resetInput(type) {
switch (type) {
case 'cluster' : {
this.cluster = '';
break;
}
case 'node' : {
this.node = '';
break;
}
case 'path' : {
this.path = '';
break;
}
}
this.getData();
}
private getData() {
this.problemsService.getFailedConsumeData(this.cluster, this.node, this.path, this.orphan, this.paginatorData.page, this.paginatorData.pageSize)
.subscribe(consumeData => {
this.dataSource = consumeData;
this.length = consumeData.length;
});
}
handlePageData(paginatorData: PaginatorData, pageEvent: PageEvent) {
if (paginatorData.currentPageSize !== pageEvent.pageSize) {
paginatorData.currentPageSize = pageEvent.pageSize;
this.resetToFirstPage(paginatorData);
} else {
paginatorData.page = pageEvent.pageIndex * pageEvent.pageSize;
paginatorData.pageIndex = pageEvent.pageIndex;
}
paginatorData.pageSize = pageEvent.pageSize;
}
**service.ts:**
getFailedConsumeData(cluster: string, node: string, path: string, orphan: boolean, page: number, limit: number): Observable<FailedConsumeData[]> {
return this.http.get<FailedConsumeData[]>(this.notConsumedUrl + cluster + "&node=" + node + "&path=" + path + "&orphan=" + orphan + '&page=' + page + '&limit=' + limit)
.pipe(catchError(this.errorService.handleError<FailedConsumeData[]>('getFailedConsumeData', [])));
}
**html:**
<mat-form-field class="inputFilter">
<input autocomplete="off" (keyup)="clusterFilter($event.target.value)" [(ngModel)]="cluster" matInput placeholder="Filter cluster">
<button (click)="resetInput('cluster')" *ngIf="cluster" aria-label="Clear" mat-button mat-icon-button matSuffix>
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field class="inputFilter">
<input autocomplete="off" (keyup)="nodeFilter($event.target.value)" [(ngModel)]="node" matInput placeholder="Filter node">
<button (click)="resetInput('node')" *ngIf="node" aria-label="Clear" mat-button mat-icon-button matSuffix>
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field class="inputFilter">
<input autocomplete="off" (keyup)="pathFilter($event.target.value)" [(ngModel)]="path" matInput placeholder="Filter path">
<button (click)="resetInput('path')" *ngIf="path" aria-label="Clear" mat-button mat-icon-button matSuffix>
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-form-field class="inputFilter">
<mat-label>Orphan</mat-label>
<mat-select (ngModelChange)="orphanChanged($event)" [(ngModel)]="orphan" matNativeControl disableOptionCentering>
<mat-option value=false>false</mat-option>
<mat-option value=true>true</mat-option>
</mat-select>
<button (click)="clearOrphanStatus(); $event.stopPropagation()" *ngIf="orphan" aria-label="Clear" mat-button mat-icon-button matSuffix>
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<mat-paginator (page)="getFailedData($event)" *ngIf="dataSource && dataSource.length !== 0"
[length]="length"
[pageIndex]="paginatorData.pageIndex"
[pageSizeOptions]="pageSizeOptions"
[pageSize]="paginatorData.pageSize"
class="paginator-light no-line">
</mat-paginator>
<app-table [columns]="tableColumns" [dataSource]="dataSource"></app-table>