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>

Ответы (0 шт):