使用Angular2实现搜索过滤器

在我们的应用程序中，搜索功能是必不可少的。使用Angular2，我们可以很容易地创建一个搜索过滤器，方便快捷地筛选出数据。

创建过滤器

创建一个名为“filter-by”（后面我们将把它作为指令使用）的文件，文件名和文件夹名可以自己决定。在里面创建一个名为“filter-by.pipe.ts”的文件，在这个文件中编写以下代码：

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

@Pipe({
  name: 'filterBy'
})
export class FilterByPipe implements PipeTransform {
  transform(collection: any[], property: string, value: string): any[] {
    if(!collection) {
      return [];
    }
    if(!property || !value) {
      return collection;
    }
    return collection.filter(item => item[property].toLowerCase().indexOf(value.toLowerCase()) !== -1);
  }
}

代码解释：

1. 在这里，我们使用Angular2的@Pipe装饰器为我们的过滤器创建一个名为“filterBy”的管道。
2. 在我们定义的transform函数中，我们检查传入的值是否为空，如果是，则返回一个空数组。
3. 使用filter()函数来过滤我们的数据集合，并返回一个包含以指定名称和值进行搜索的项目的新数组。

使用过滤器

在我们的HTML模板中，我们可以很容易地使用我们创建的过滤器。根据需要，我们可以选择把输入框绑定到一个变量或者管道符号后面。

<input [(ngModel)]="searchText"/>
<ul>
  <li *ngFor="let item of items | filterBy: 'name': searchText">
    {{ item.name }}
  </li>
</ul>

代码解释：

1. 在这里，我们使用[(ngModel)]来绑定输入框中的搜索值。
2. 我们使用“ngFor”指令来遍历项目并使用我们创建的过滤器进行过滤。
3. 我们的过滤器根据每个项目的“name”属性值来过滤项目。

结论

在我们的示例中，我们创建了一个名为“filterBy”的过滤器，该过滤器可以帮助我们轻松地进行数据筛选。无论我们是在使用输入框和指令来进行搜索，还是在使用其他方法，我们都可以很容易地使用这种方法来进行数据过滤。

参考

Angular2 Custom Filters