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

Posted 2023-03-29

【中文标题】过滤和分页不适用于 ngxpagination 模板

【英文标题】：Filtering and pagination is not working with ngxpagination template

【发布时间】：2019-07-12 20:10:51

【问题描述】：

我有一个 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

【问题讨论】：

能不能写个小demo代码

@AmitGolhar 添加了演示，谢谢。

【参考方案1】：

App 组件、draftFilterArg 和 tableindex 中的 2 个变量似乎有些混淆。我已经用 DraftFilterArg 替换了 tableindex。还用管道函数重写了 getTabTotal 函数。

Pagination 组件中还有一个错误，“最后一页的第 n 页”，其中最后一页应该调用 getLastPage() 函数而不是 lastpage 变量。

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

【讨论】：

感谢@Haijin，tabIndex 变量适用于使用 p-tabView 在选项卡之间切换的较大应用程序，但我明白您使用 draftFilterArg 的意思。我还看到了您在分页控件中指出的错误。再次感谢。

抱歉，我是想早点奖励赏金的。我现在已经在那里授予它了。