有角度的2个顺序管道

Question

如何顺序使用两个管道？

<div class="thread" *ngFor="thread of threadlist | bookmarkPipe | threadPipe"></div>

具体来说，我的线程有一个书签：布尔属性以及标签属性（单元、任务、子任务）。 所以我想要实现的是第一个管道过滤所有标记的线程，然后应用第二个管道（下）

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

Answer 1

其实也没什么特别的。第二个管道将接收前一个管道的值：

data -> Pipe1 -> filtered data (#1) -> Pipe2 -> filtered data (#2)

例如，如果我有一个数组 [ 'val1', 'val2', 'val3' ] 并带有以下管道：

@Pipe({
  name:'pipe1'
})
export class Pipe1 {
  transform(data) {
    return data.filter((d) => {
      return d!= 'val1';
    });
  }
}

@Pipe({
  name:'pipe2'
})
export class Pipe2 {
  transform(data) {
    return data.filter((d) => {
      return d!= 'val2';
    });
  }
}

通过在ngFor 中使用以下表达式：

#elt of data | pipe1 | pipe2

如果我们将pipe2 应用于先前的结果，data | pipe1 将返回[ 'val2', 'val3' ] 并返回[ 'val3' ]。

查看对应的plunkr：https://plnkr.co/edit/EpKMitR3w89fRiyGYQz7?p=preview。