Как отфильтровать данные в Angular 2 с помощью флажков?

Question

У меня есть список задач:

import { Task } from './tasks';

export const TASKS: Task[] = [
  { 
    taskCity: 'Tokyo', 
    taskName: 'Todo One',
    taskPrivacy: 'Personal',
    taskType: 'Night',
    taskDeadline: '13 Aug',
    taskPrice: '10 021 Р'
  },
  { 
    taskCity: 'Canberra', 
    taskName: 'Todo Two',
    taskPrivacy: 'Public',
    taskType: 'Day',
    taskDeadline: '23 Sept',
    taskPrice: '2 010 Р' 
  },
  { 
    taskCity: 'Jacksonville', 
    taskName: 'Todo Three',
    taskPrivacy: 'Personal',
    taskType: 'Night',
    taskDeadline: '30 Sept',
    taskPrice: '3 560 Р' 
  }
];

Мой код фильтра выглядит так:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {
    transform(tasks: any, term: any): any {
        if(term === undefined) {
            return tasks;
        }
        return tasks.filter(function(task: any) {
            return task.taskName.toLowerCase().includes(term.toLowerCase());
        })
    }
}

И этот список выводится в таблице:

<input type="text" [(ngModel)]="term" name="test" placeholder="Search">
<tr *ngFor="let task of tasks | filter:term; let i = index"> 
   <td>{{i + 1}}</td>
   <td>{{task.taskCity}}</td>
   <td>{{task.taskName}}</td>
   <td>{{task.taskType}}</td>
   <td>{{task.taskDeadline}}</td>
   <td>{{task.taskPrice}}</td>
</tr>

Все работает нормально, но теперь я хочу добавить два флажка: "Конфиденциальность" и "Тип", чтобы фильтровать элементы по "taskPrivacy" и "taskType". Я просмотрел этот пример и до сих пор не могу его адаптировать.

Answer 1

Вы могли бы реализовать это по-другому, а не с помощью трубы. Добавьте что-то вроде этого в ваш компонент:

get filteredTasks() {
        return this.tasks.filter(t => t.taskName.toLowerCase().includes(this.term.toLowerCase()); 
        // you can then extend this logic to include your new checkboxes easier that with a pipe
}

и затем в вашем шаблоне представления вы просто привязываете это новое свойство вместо задач:

<tr *ngFor="let task of filteredTasks ; let i = index">