过滤和分页不适用于ngxpagination模板

Question

我有一个ngx-pagination的自定义分页模板实现,它正常工作.但是,当我尝试使用带分页的过滤器管道时,分页会中断:分页控件保持与应用过滤器之前相同,并且过滤后的数据集不再分页(11个项目出现在屏幕上而不是10个) .页面底部的分页控件在过滤时仍然可见,但不会影响过滤后的数据,即不会更改页面.

组件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>

组件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;
  }

}

从'@ angular/core'过滤管道导入{Pipe,PipeTransform};

@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;
    }
  }
}

编辑:添加了演示.代码有点不同,重构以删除不需要的代码.https://stackblitz.com/edit/angular-fnbnaw

Answer 1

关于 App componnet 中的两个变量、draftFilterArg 和 tableindex 似乎有些混乱。我已将 tableindex 替换为 DraftFilterArg。还用管道函数重写了getTabTotal函数。

分页组件中也存在错误，“最后一页的第 n 页”，其中最后一页应该调用 getLastPage() 函数而不是最后一页变量。

在此处检查结果： https: //stackblitz.com/edit/angular-mcmpbe