使用 Angular pipe 过滤、排序、分页

分类:JavaScript     发布时间:2021-01-07     最后更新:2021-01-08     浏览数:1157
尝试使用 Angular pipe 过滤、排序、分页

思路:总任务数组 -> 过滤出分配给我的任务 -> 过滤出 pending 的任务 -> 过滤出清房的任务 -> 按选定字段排序 -> 分页

优点:变量少,只需维护一个数组,当有 websocket 推送任务变更到客户端,只需要在一个数组找到对应的任务然后替换,再深拷贝一次数组。

缺点:pipetransform 方法会执行多次。

使用方

<sp-tasks
  [showEmpty]="false"
  [animationDisabled]="isAnimationDisabled"
  [tasks]="myTasks | myTasks:userId:organizationUnitIds | filterTasks:'pending' | filterTasks:'cleanRoom' | sortTasks:selectedSortId | pagination:myTasksPageIndex"
  (actionEvent)="changeTaskStaging($event)"
  (chatEvent)="taskChat($event)"
  (taskEvent)="showDetail($event)"
  (pressEvent)="onPressTask($event)"
></sp-tasks>

当滑动页面底部时,只需把 myTasksPageIndex 加一即可,分页的逻辑交给 pipe 处理

filterTasks pipe

import { Pipe, PipeTransform } from '@angular/core';
import { TaskStage } from '@app/pages/add-task/constants';

import { Task } from '../models/task.model';

@Pipe({
  name: 'filterTasks',
})
export class FilterTaskPipe implements PipeTransform {
  transform(
    tasks: Task[],
    type: 'cleanRoom' | 'normal' | 'pending' | 'done' = 'cleanRoom',
    pageIndex = 1,
  ): any {
    switch (type) {
      case 'cleanRoom':
        return tasks.filter(task => task.isCleanRoomTask);
      case 'normal':
        return tasks.filter(task => !task.isCleanRoomTask);
      case 'pending':
        return tasks.filter(task => task.stage !== TaskStage.Done);
      case 'done':
        return tasks.filter(task => task.stage === TaskStage.Done);
      default:
        return tasks;
    }
  }
}

分页 pipe

import { Pipe, PipeTransform } from '@angular/core';
import { Task } from '../models/task.model';

@Pipe({
  name: 'pagination'
})
export class PaginationPipe implements PipeTransform {

  transform(tasks: Task[], pageIndex = 1, pageSize = 10): Task[] {
    const start = (pageIndex - 1) * pageSize;
    const end = start + pageSize;
    return tasks.slice(0, end);
  }
}
上一篇: Angular websocket 事件装饰器 下一篇: Angular host 样式