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 - 则不会显示任何值。

有没有办法使用枚举作为 Pipe 参数？

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' ..

的字符串一起工作

.

附加信息：

使用带有多个参数的 Pipe 会像这样：

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

并像这样使用它：

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

Angular2 在管道中使用枚举

Angular2 Use enum in pipe

enums

angular-pipe

angular