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'过滤项目。我查看了this示例，仍然无法适应它。

Answer 1

您可以采用不同的方式实现此目的，而不是使用Pipe。将这样的内容添加到您的组件中：

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

如何使用复选框过滤Angular 2中的数据？

1 个答案: