用于多个参数的angular2管道 [英] angular2 pipe for multiple arguments

问题描述

我有一个线程对象数组，每个线程对象都有属性
$ b $ $ $ $ $ $ $ $ $ $ $ $单位：编号
子任务：编号

我想在这些线程之后创建一个管道进行过滤，远远我有一个像下面的工作管道。我还没有真正满意，想问问你们是否有更优雅的解决方案？

HTML：

 < div class =thread-item* ngFor =＃threadlist of threadlist | threadPipe：unitPipe：taskPipe：subtaskPipe>< / div> 
  

Pipe.ts

 导出类ThreadPipe实现PipeTransform {
 
 threadlistCopy：Thread [] = []; 
 
 transform（array：Thread []，[unit，task，subtask]）：any {
 
 //查看全部主题
 if（unit == 0 &&任务== 0&&子任务== 0）{
返回数组
} 
 //仅查看所选单位
 if（unit！= 0& amp ;& 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 
} 
 //查看所选单位和任务
 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 
} 
 //查看所选单位，任务，如果（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 
 } 
} 
} 
  

解决方案

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

pre $ export $ $ $



$转换（数组：线程[ （单位== 0&&任务== 0&& subtask =任务，任务，子任务）：任何{

//查看全部主题
if = 0）{
返回数组
}
//仅查看所选单位
if（unit！= 0&& task&task; 0&&subtask == 0）{
return array.filter（thread => {
return thread.unit === unit;
}）;

//查看所选的单位和任务
if（unit！= 0& task！= 0& subtask == 0）{
return array .filter（thread => {
return thread.unit === unit&& thread.task === task;
}）;

//查看所选单元，任务，子任务
if（unit！= 0&&task; = 0&&subtask！= 0）{
return array.filter（thread => {
return thread.unit === unit&& thread.task === task&& thread.subtask === subtask;
} ）;
}
}
}

I have a array of thread objects, each thread object with the properties

unit:number
task:number
subtask:number

I want to create a pipe to filter after these threads, so far I have a working pipe like below. I'm not really satisfied with it yet and wanted to ask you guys if there is a more elegant solution?

HTML:

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

Pipe.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
    }
  }
}

解决方案

You are implementing your pipe the right way, but you are basically re-inventing the Array.prototype.filter mechanism in your code. A simpler way will be:

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;
      });
    }
  }
}

这篇关于用于多个参数的angular2管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！