使用自定义筛选器

在Angular5中，datatable的筛选器无法与筛选器指令配合使用，因此我们需要使用自定义筛选器。以下是解决方法的示例代码：

1. 首先，在你的组件中，创建一个名为“customFilter”的自定义管道：

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

@Pipe({ name: 'customFilter' }) export class CustomFilterPipe implements PipeTransform { transform(items: any[], searchText: string): any[] { if (!items) return []; if (!searchText) return items; searchText = searchText.toLowerCase(); return items.filter(item => { return item.name.toLowerCase().includes(searchText); }); } }

2. 在你的HTML模板中，使用该筛选器指令，并将搜索文本绑定到一个变量：

3. 在你的组件中，声明一个名为“searchText”的变量：

export class MyComponent { searchText: string = ''; items = [ { name: 'John', age: 31, gender: 'Male' }, { name: 'Jane', age: 25, gender: 'Female' }, { name: 'Bob', age: 42, gender: 'Male' } ]; }

现在，你的datatable的筛选器应该可以正常工作了！