以下是一个使用Angular2实现数据表格列过滤的示例:
filter.pipe.ts
的新文件,并将以下代码复制到文件中:import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string, columnName: string): any[] {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter(item => {
return item[columnName].toLowerCase().includes(searchText);
});
}
}
FilterPipe
并将其添加到pipes
数组中。例如:import { Component } from '@angular/core';
import { FilterPipe } from './filter.pipe';
@Component({
selector: 'app-root',
template: `
Column1
Column2
Column3
{{item.column1}}
{{item.column2}}
{{item.column3}}
`,
pipes: [FilterPipe]
})
export class AppComponent {
searchText: string;
items: any[] = [
{ column1: 'value1', column2: 'value2', column3: 'value3' },
{ column1: 'value4', column2: 'value5', column3: 'value6' },
{ column1: 'value7', column2: 'value8', column3: 'value9' }
];
}
filter
管道将输入框中输入的文本与指定的列进行匹配。在上面的示例中,我们使用searchText
和column1
来过滤items
数组。这样,当输入框中的文本发生变化时,表格将根据指定的列过滤显示的行。