Angular2 Использовать enum в трубе

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

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?


angular enums angular-pipe
person Evgeni Dimitrov    schedule 21.09.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я думаю, вы видели старый пример трубы, потому что ваш 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 : ..."
person slaesh    schedule 21.09.2016