用于多个参数的 angular2 管道答案

【问题标题】：angular2 pipe for multiple arguments用于多个参数的 angular2 管道
【发布时间】：2016-07-25 05:58:33
【问题描述】：

我有一个线程对象数组，每个线程对象都有属性

unit:number
task:number
subtask:number

我想创建一个管道来过滤这些线程，到目前为止，我有一个如下所示的工作管道。我对它还不是很满意，想问你们是否有更优雅的解决方案？

HTML：

<div class="thread-item" *ngFor="#thread of threadlist | threadPipe:unitPipe:taskPipe:subtaskPipe"></div>

管道.ts

export class ThreadPipe implements PipeTransform{

  threadlistCopy:Thread[]=[];

  transform(array:Thread[], [unit,task,subtask]):any{

    //See all Threads
    if(unit == 0 && task == 0 && subtask == 0){
      return array
    }
    //See selected Units only
    if(unit != 0 && task == 0 && subtask == 0){
      this.threadlistCopy=[];
      for (var i = 0; i<array.length;i++){
        if(array[i].unit == unit){
          this.threadlistCopy.push(array[i])
        }
      }
      return this.threadlistCopy
    }
    //See selected Units and Tasks
    if (unit != 0 && task != 0 && subtask == 0){
      this.threadlistCopy=[];
      for (var i = 0; i<array.length;i++){
        if(array[i].unit == unit && array[i].task == task){
          this.threadlistCopy.push(array[i])
        }
      }
      return this.threadlistCopy
    }
    // See selected units, tasks, subtask
    if (unit != 0 && task != 0 && subtask != 0){
      this.threadlistCopy=[];
      for (var i = 0; i<array.length;i++){
        if(array[i].unit == unit && array[i].task == task && array[i].subtask == subtask){
          this.threadlistCopy.push(array[i])
        }
      }
      return this.threadlistCopy
    }
  }
}

【问题讨论】：

每个 if 语句都可以替换为 array.filter(i=> i.unit == unit)，其他 if 条件也是如此。因此，所有内容都可以像return array.filter(i=>i.unit == unit).filter(i=>i.task==task).filter(i=>i.subtask == subtask) 这样在一行中。这是你要找的吗？

标签： filter angular forum angular2-pipe

【解决方案1】：

您正在以正确的方式实现管道，但您基本上是在代码中重新发明Array.prototype.filter 机制。更简单的方法是：

export class ThreadPipe implements PipeTransform{

  transform(array:Thread[], [unit,task,subtask]):any{

    //See all Threads
    if(unit == 0 && task == 0 && subtask == 0){
      return array
    }
    //See selected Units only
    if(unit != 0 && task == 0 && subtask == 0){
      return array.filter(thread => {
        return thread.unit === unit;
      });
    }
    //See selected Units and Tasks
    if (unit != 0 && task != 0 && subtask == 0){
      return array.filter(thread => {
        return thread.unit === unit && thread.task === task;
      });
    }
    // See selected units, tasks, subtask
    if (unit != 0 && task != 0 && subtask != 0){
      return array.filter(thread => {
        return thread.unit === unit && thread.task === task && thread.subtask === subtask;
      });
    }
  }
}

【讨论】：

写完这个答案后，我看到@Abdulrahman 的评论很好地总结了它。
谢谢，很高兴知道我在正确的轨道上 :) 我只是不确定我是否正确理解了这个问题。
非常感谢！我不知道 array.prototype.filter :) 是的，在这两者之间我也在考虑使用 fat-arrow 函数
假设您想要相同的功能，但有大约 20 个字段，而不是三个任务、子任务和单元。用所有可能的组合编写这将是乏味的。如何编写一个可以做到这一点的通用函数？（意思是，如果至少一个字段与条件匹配，则返回一个对象的过滤器）似乎 array.prototype.filter 是要走的路，但我真的不明白如何实现它。如果它超出了这个问题的范围，我可能会为此提出一个新问题。