Как отфильтровать источник данных таблицы матов на основе двух введенных столбцов и нажатия кнопки поиска - PullRequest
Новая
       2

Как отфильтровать источник данных таблицы матов на основе двух введенных столбцов и нажатия кнопки поиска

0 голосов
/ 25 октября 2019

У меня есть данные таблицы матов для столбцов - Роль, Статус, Идентификатор электронной почты, Имя. И над этой таблицей я дал такую ​​опцию, как область поиска, где пользователь пытается ввести значение роли и значение статуса и нажимает кнопку поиска. если эти два значения, введенные пользователем, точно совпадают для строки, то он должен показывать эти данные строки только в противном случае он должен показывать, что строки не найдены. Я пытался использовать метод filterPredicate для сопоставления с соответствующими значениями объекта, но не смог взломатьэто из.

1 Ответ

0 голосов
/ 25 октября 2019

Вы должны объявить предикат фильтра после создания нового 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);
}

Это должно работать для вас.

...