angular – 过滤和分页不适用于ngxpagination模板
发布时间:2020-12-17 17:37:26 所属栏目:安全 来源:网络整理
导读:我有一个ngx-pagination的自定义分页模板实现,它正常工作.但是,当我尝试使用带分页的过滤器管道时,分页会中断:分页控件保持与应用过滤器之前相同,并且过滤后的数据集不再分页(11个项目出现在屏幕上而不是10个) .在过滤时,页面底部仍然可以看到分页控件,但不
我有一个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({ 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |