我正在使用mat-table。它有一个工作正常的过滤器。
针对以下数据(所有列)进行过滤
const ELEMENT_DATA: Element[] = [
{position: 14598, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 24220, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 39635, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 42027, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 53216, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 60987, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 70976, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 81297, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 90975, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 18879, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
{position: 11209, name: 'Sodium', weight: 22.9897, symbol: 'Na'}
];
但是现在我正在尝试更改过滤器,因为我想过滤的只是"位置","名称","符号"专栏。我通过这个例子走了Filtering specific column in Angular Material table in angular 5。 我不明白请帮帮我
答案 0 :(得分:15)
您必须覆盖数据源的filterPredicate
。
以下是如何操作的示例:Working demo
基本上,您希望指定过滤器应用于数据的属性:
this.dataSource.filterPredicate = function(data, filter: string): boolean {
return data.name.toLowerCase().includes(filter) || data.symbol.toLowerCase().includes(filter) || data.position.toString().includes(filter);
};
答案 1 :(得分:1)
添加到错误的答案。这是更详细的实现,
export class FilterTable implements AfterViewInit {
//some datasource
datasource //=
displayedColumns //=insert column names on which you want to filter whether they are displayed or not, but present in the datasource
// Apply filter to the datasource
applyFilter(filterValue: string) {
this.datasource.filter = filterValue;
}
ngAfterViewInit() {
// Overwriting filterPredicate here, as it needs to be done after the datasource is loaded.
this.datasource.filterPredicate = (data, filter) => {
var tot = false;
for (let column of this.displayedColumns) {
//incase if there is a date type and is displayed differently using a pipe, then convert it intorequired format before filtering
//check if all the columnson which you are filtering are actually present
if ((column in data) && (new Date(data[column].toString()).toString() == "Invalid Date")) {
//if not date column
tot = (tot || data[column].toString().trim().toLowerCase().indexOf(filter.trim().toLowerCase()) !== -1);
} else {
//change this to the format in which date is displayed
var date = new Date(data[column].toString());
var m = date.toDateString().slice(4, 7) + " " + date.getDate() + " " + date.getFullYear();
tot = (tot || m.toLowerCase().indexOf(filter.trim().toLowerCase()) !== -1);
}
}
return tot;
}
}
}
如果可以改进,请随时提出修改建议
答案 2 :(得分:1)
在角材料表中,我们可以根据数据本身创建基于列的过滤器。
来源Link
演示Link
为此,我们需要使用 customFilter()方法
覆盖 filterPredicate 方法 ...
ngOnInit() {
this.getRemoteData();
// Overrride default filter behaviour of Material Datatable
this.dataSource.filterPredicate = this.createFilter();
}
...
// Custom filter method fot Angular Material Datatable
createFilter() {
let filterFunction = function (data: any, filter: string): boolean {
let searchTerms = JSON.parse(filter);
let isFilterSet = false;
for (const col in searchTerms) {
if (searchTerms[col].toString() !== '') {
isFilterSet = true;
} else {
delete searchTerms[col];
}
}
let nameSearch = () => {
let found = false;
if (isFilterSet) {
for (const col in searchTerms) {
searchTerms[col].trim().toLowerCase().split(' ').forEach(word => {
if (data[col].toString().toLowerCase().indexOf(word) != -1 && isFilterSet) {
found = true
}
});
}
return found
} else {
return true;
}
}
return nameSearch()
}
return filterFunction
}
检查完整的工作代码here
答案 3 :(得分:0)
材料已经实现了自己的搜索功能,您可以通过更新日期源上的filterPredicate属性来覆盖它。在ngOninit()生命周期上调用generateTable函数。
generateTable(tableData: any) {
this.dataSource = new MatTableDataSource(tableData);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.dataSource.filterPredicate = (data: any, filter: string) => {
console.log(data);
console.log(filter);
let matchFound = false;
for (let column of this.displayedColumns) {
if(column in data) {
if(data[column]) {
matchFound = (matchFound || data[column].toString().trim().toLowerCase().indexOf(filter.trim().toLowerCase()) !== -1)
}
}
}
return matchFound;
}
}
每当您希望应用过滤器时,请将dataSource上的过滤器属性更新为要搜索的字符串值。
applyFilter(searchValue: any) {
this.dataSource.filter = this.filterText.trim().toLowerCase();
}