angular - Filtrering och paginering fungerar inte med ngxpagination-mallen

Jag har en anpassad pagineringsmallimplementation av ngx-pagination som fungerar normalt. Men när jag försöker använda ett filterrör med pagineringen, bryts pagineringen: pagineringskontrollerna förblir desamma som innan filtret tillämpades, och den filtrerade datamängden pagineras inte längre (11 objekt visas på skärmen istället för 10). Pagineringskontrollerna är fortfarande synliga längst ner på sidan när filtret används, men påverkar inte de filtrerade datan, dvs. ingen sidändring sker.

Komponent HTML

<task-manager-record *ngFor="let record of filteredDraftRecords | draftFilter: draftFilterArg | paginate: getPaginationOptions(tabIndex); let i = index;" [record]="record"></oir-task-manager-record>
<div class="totalRecords">
    <label>Total </label>
    {{ (filteredDraftRecords | draftFilter:draftFilterArg)?.length }}
</div>
<pagination *ngIf="(filteredDraftRecords | draftFilter:draftFilterArg)?.length > getPaginationOptions(tabIndex).itemsPerPage"
          (pageChange)="onChangePage($event)"
          [options]="getPaginationOptions(tabIndex)">
</pagination>

Komponent ts

import { Component, OnInit } from '@angular/core';
import { RecordViewModel } from '../models/app.models';
import { MotionStatus } from '../models/enum.model';
import { PaginationOptions } from 'proceduralsystem-clientcomponents';
import { SelectItem } from '@motions/motions.model';
import { TaskManagerService } from './task-manager.service';

@Component({
  selector: 'task-manager',
  templateUrl: './task-manager.component.html',
  styleUrls: ['./task-manager.component.less']
})
export class TaskManagerComponent implements OnInit {

  draftrecords = new Array<RecordViewModel>();
  filteredDraftRecords = new Array<RecordViewModel>();

  motionStatus = MotionStatus;
  draftFilterArg = 0;
  tabIndex = 0;
  page: { [id: string]: number} = {};
  currentPage = 1;

  constructor(
    public taskManagerService: TaskManagerService
  ) {
  }

  ngOnInit(): void {
    this.loadDraftRecords();
  }

  loadDraftRecords(): void {
    this.taskManagerService.getDraftMotions().subscribe(m => {
    this.draftRecords = m.Records;
      this.filteredDraftRecords = this.draftRecords;
    });
  }


  // Pagination functions
  getPaginationOptions(tabIndex: number): PaginationOptions {
    const paginationId = `tab${tabIndex}`;

    return {
      id: 'tab',
      itemsPerPage: 10,
      currentPage: this.page[paginationId],
      totalItems: this.draftRecords.length
    };
  }

  onChangePage(pageNumber) {
    this.page[`tab${this.tabIndex}`] = pageNumber;
  }

}

Filter Pipe import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'draftFilter'
})
export class DraftFilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(args) {
      return value.filter(item => item.status.id === args);
    } else {
      return value;
    }
  }
}

Redigera: Lagt till demo. Koden är lite annorlunda, refaktorerad för att ta bort onödig kod. https://stackblitz.com/edit/angular-fnbnaw

Svar #1

Det verkar vara viss förvirring kring de två variablerna i App-komponenten, draftFilterArg och tableindex. Jag har ersatt tableindex med draftFilterArg. Jag har också skrivit om funktionen getTabTotal med pipe-funktionen.

Det finns också en bugg i Pagination-komponenten, "page n of lastpage" där den sista sidan istället för att använda variabeln lastpage borde anropa funktionen getLastPage().

Kolla resultatet här: https://stackblitz.com/edit/angular-mcmpbe

Relaterade artiklar