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

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

解决方法

关于App componnet,draftFilterArg和tableindex中的2个变量似乎有些混乱.我用draftFilterArg替换了tableindex.还使用管道函数重写了getTabTotal函数.

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

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

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

解决方法

猜你在找的Angularjs相关文章