Angular2 Используйте перечисление в трубе

Question

У меня есть этот фильтр трубы:

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 является перечисление:

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

Теперь я хочу, чтобы использовать трубу в качестве компонента, передавая значение перечисления.

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> 

Если я передаю строку, которая соответствует значению перечисления, как '0', '1', и т.д., это работает, но если я прохожу TaskStatus.New - значения не отображаются.

Есть ли способ использовать перечисление как аргумент трубы?

Answer 1

Я думаю, вы видели старый пример трубы, причиной вашего args array.

Написать трубы, как это:

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

и использовать трубы как т его:

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

Он работал со строками причины '1'[0] == '1' ..

.

Дополнительная информация:

Использование трубы с несколькими аргументами будет выглядеть так:

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

и использовать его как это:

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