如何根据输入并单击搜索按钮的两列筛选mat表数据源

Question

我为列显示了表格数据-角色、状态、电子邮件iD、姓名。在该表的上方，我给出了类似搜索区域的选项，用户尝试在其中输入Role的值和Status的值，然后单击search按钮。如果用户输入的这两个值对于一行是完全匹配的，那么它必须只显示该行数据，否则它必须显示未找到的行。我试图使用filterPredicate方法来匹配各自的对象值，但无法破解它。

Answer 1

您必须在创建新的MatTableDataSource之后声明一个筛选器谓词。

filterObj: {role: string, status: string} = {role: null, status: null}; // <-- declare this at the start of your component.
this.dataSource.filterPredicate = (myObject, filter) => {
let filterObj: {role: string, status: string} = JSON.parse(filter);
if(((filterObj.role && filterObj.role != '') ? myObject.role == filterObj.role : true) && ((filterObj.status && filterObj.status != '') ? myObject.status == filterObj.status : true)) {
return true;
} else {
return false;
}
}

也许你在matInput中的keyup上调用了一个applyFilter函数。我总是有一个函数，我可以根据我赋予函数的类型设置一个过滤器。在这种情况下，不要忘记将过滤器对象存储在组件中。

applyFilter(value: string,type: string) {
switch(type) {
case 'role':
this.filterObj.role = value;
break;
case 'status':
this.filterObj.status = value;
break;
default:
break;
}
this.dataSource.filter = JSON.stringify(this.filterObj);
}

这应该对你有用。

Answer 2

对于自定义过滤器，我们必须在创建新的MatTableDataSource(如(后定义filterPredicate函数

this.dataSource = new MatTableDataSource<dataType>(this.data);
this.datasource.filterPredicate = (data: dataType, filtersJson: string) {
const matchFilter = [];
const filters = JSON.parse(filtersJson);
filters.forEach((filter) => {
const val = data[filter.id] === null ? '' : data[filter.id];
matchFilter.push(val.toLowerCase().includes(filter.value.toLowerCase()));
});
return matchFilter.some(Boolean);
}

这里dataType是表行数据的接口。

filterPredicate函数将按角度对每个表行执行。

在html中，您可以使用类似的事件绑定

<input
type="text"
placeholder="Search by columnName1 or columnName2 or ...."
(keyup)="onSearch($event.target.value)"
/>

&你需要在类似的类中定义onSearch函数

onSearch(value) {
const tableFilters = [];
tableFilters.push(
{
id: 'columnName1',
value: value,
},
{
id: 'columnName2',
value: value,
}
);
this.dataSource.filter = JSON.stringify(tableFilters);
}

通过在tableFilters中添加objs，可以添加n个列来匹配数据。

就是这样。万岁