2 tubes séquentiels angulaires

Question

Comment utiliser deux tubes séquentiellement?

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

Dans mes discussions spécifiques ont un signet: propriété booléenne ainsi que des propriétés d'étiquette (unité, tâche, sous-tâche). donc ce que je veux réaliser est que le premier tube filtre tous les fils qui sont favoris, puis appliquer le 2ème tube (ci-dessous)

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

En fait, il n'y a rien à faire de particulier. Le second tuyau recevra la valeur de la précédente:

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

Par exemple, si j'ai un tableau [ 'val1', 'val2', 'val3' ] et avec les tuyaux suivants:

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

En utilisant l'expression suivante dans une ngFor:

#elt of data | pipe1 | pipe2 

data | pipe1 retournera [ 'val2', 'val3' ] et retour [ 'val3' ] si l'on applique le pipe2 sur le résultat précédent.

Voir le plunkr correspondant: https://plnkr.co/edit/EpKMitR3w89fRiyGYQz7?p=preview.