5

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

}

过滤管道导入 { 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;
    }
  }
}

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

4

1 回答 1

4

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

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

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

于 2019-02-22T20:59:13.673 回答