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中的2个变量，draftFilterArg和tableindex似乎有些困惑。我已经用draftFilterArg替换了tableindex。还用管道函数重写了getTabTotal函数。

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

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

筛选和分页不适用于ngxpagination模板

1 个答案: