角度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> 

すべてが正常に動作し、今は 'privacy'と 'Type'という2つのチェックボックスを追加して、 'taskPrivacy'と 'taskType'で項目をフィルタリングしたいと考えています。 私はthisの例を見てきましたが、まだそれを適応させることはできません。

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">