Question

我为各列显示了席子表数据-角色，状态，电子邮件ID，名称。在该表上方，我给了类似搜索区域的选项，用户尝试在其中输入角色的值和状态的值，然后单击搜索按钮。如果用户输入的这两个值完全匹配一行，则它必须仅显示该行数据，否则必须显示未找到任何行。我尝试使用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;
  }
}

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

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);
}

那应该对你有用。

如何根据输入并单击搜索按钮的两列来过滤席子表格数据源

1 个答案: