Angular2 Utilisation ENUM dans le tuyau

Question

J'ai ce tuyau filtre:

import { Pipe, PipeTransform } from '@angular/core'; 
import { TaskStatus } from './task-status'; 

@Pipe({name: 'WithStatus'}) 
export class TaskStatusFilter implements PipeTransform{ 
    transform(items: any[], args: any[]): any { 
     return items.filter(item => item.status == args[0]); 
    } 
} 

TaskStatus est un ENUM:

export enum TaskStatus{ 
    New, Dev, Test, Deploy 
} 

Maintenant, je veux utiliser le tuyau dans un composant en passant une valeur ENUM.

import { Component, OnInit } from '@angular/core'; 
import { Task } from '../task/task'; 
import { TaskStatus } from '../task/task-status'; 

@Component({ 
    selector: 'app-board', 
    templateUrl: './board.component.html', 
    styleUrls: ['./board.component.css'] 
}) 
export class BoardComponent implements OnInit { 
    tasks: Array<Task>; 
    public TaskStatus = TaskStatus; 
    constructor() { 
    this.tasks = [ 
     new Task(1,'tasl1', 'task1 description', TaskStatus.New), 
     new Task(2,'tasl2', 'task2 description', TaskStatus.New), 
     new Task(3,'tasl3', 'task3 description', TaskStatus.New), 
     new Task(4,'tasl4', 'task4 description', TaskStatus.Dev), 
     new Task(5,'tasl2', 'task2 description', TaskStatus.Dev), 
     new Task(6,'tasl6', 'task6 description', TaskStatus.Test), 
     new Task(7,'tasl7', 'task7 description', TaskStatus.Deploy) 
    ]; 
    } 
    ngOnInit() { } 
} 

board.component.html:

<div class="grid grid-pad"> 
    <div class="col-1-4"> 
    <div class="content"> 
     <h2>New</h2> 
     <app-task-card *ngFor="let task of tasks | WithStatus: TaskStatus.New" [task]="task"></app-task-card> <!-- This does not work - the filter is false for every element --> 
    </div> 
    </div> 
    <div class="col-1-4"> 
    <div class="content"> 
     <h2>Development</h2> 
     <app-task-card *ngFor="let task of tasks | WithStatus: '1'" [task]="task"></app-task-card> <!--passing the value of the enum works--> 
    </div> 
    </div> 
    <div class="col-1-4"> 
    <div class="content"> 
     <h2>Test</h2> 
     <app-task-card *ngFor="let task of tasks | WithStatus: '2'" [task]="task"></app-task-card> 
    </div> 
    </div> 
    <div class="col-1-4"> 
    <div class="content"> 
     <h2>Deploy</h2> 
     <app-task-card *ngFor="let task of tasks | WithStatus: '3'" [task]="task"></app-task-card> 
    </div> 
    </div> 
</div> 

Si je passe une chaîne qui correspond à la valeur ENUM comme '0', '1', etc., cela fonctionne, mais si je passe TaskStatus.New - aucune valeur n'est affichée.

Existe-t-il un moyen d'utiliser une énumération en tant qu'argument Pipe?

Answer 1

Je suppose que vous avez vu un vieil exemple d'un tuyau, cause de votre args array.

Écrivez votre pipe comme ceci:

@Pipe({name: 'WithStatus'}) 
export class TaskStatusFilter implements PipeTransform{ 
    transform(items: any[], status: any): any { 
     if (!items || !items.length) return []; 
     return items.filter(item => item.status == status); 
    } 
} 

et utilisez votre pipe comme ette:

<app-task-card *ngFor="let task of tasks | WithStatus: TaskStatus.New" [task]="task"></app-task-card> 

Il a travaillé avec des cordes cause de '1'[0] == '1' ..

.

Informations complémentaires:

l'aide d'un tuyau avec de multiples arguments serait comme ceci:

transform(items: any[], arg1: any, arg2, arg3, ...): any 

et l'utiliser comme ceci:

*ngFor="let item of items | pipeName : arg1 : arg2 : arg3 : ..."