Angular2 Verwenden Enum in Rohr

Question

Ich habe diesen Filter Rohr:

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 ist eine Enumeration:

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

Jetzt möchte ich, indem ein ENUM-Wert das Rohr in einer Komponente verwenden.

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> 

Wenn ich eine Zeichenfolge übergeben, die wie '0' an den ENUM-Wert entspricht, '1', usw., es funktioniert, aber wenn ich pass TaskStatus.New - keine Werte werden angezeigt.

Gibt es eine Möglichkeit, eine Enum als Pipe-Argument zu verwenden?

Answer 1

Ich glaube, Sie sahen ein altes Beispiel für eine Rohrleitung, weil Ihre args array.

Schreiben Sie Rohr wie folgt aus:

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

und verwenden Sie Ihre Pfeife wie t sein:

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

Es mit Streichern Ursache '1'[0] == '1' gearbeitet ..

.

Zusätzliche Informationen:

ein Rohr mit mehreren Argumenten so sein würde:

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

und es wie folgt verwendet werden:

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