要实现Angular表格搜索过滤器,可以使用Angular的管道(pipe)来过滤表格数据。下面是一个实现的示例:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe 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);
});
}
}
import { FilterPipe } from './filter.pipe';
@NgModule({
declarations: [
// ...
FilterPipe
],
// ...
})
{{ item.name }}
{{ item.description }}
这样,当用户在输入框中输入搜索词时,表格中的数据将根据搜索词动态过滤显示。