Фильтр по логическому значению angular
я пытаюсь сделать фильтр по статусу пользователя, «Ативо» для онлайн и «Инативо» для офлайн, но фильтрация по строке вызывает у меня некоторую головную боль, потому что когда я набираю «ативо», все офлайн-пользователи все равно отображаются, потому что слово «ативо» существует в «инативо». Поэтому я хотел придать ложное значение «инативо» и истинное значение «ативо».
Любые советы о том, как мне это сделать? Я все еще использую фильтр, чтобы показать «Ativo» и «Inativo» в качестве параметров в списке данных, но при выборе он должен отправлять истинное или ложное значение в функцию фильтра.
Это html и функция на ts, которую я создал
<input type = "text" list = "status" placeholder = "Status" (keyup) = "updateFilter($event)" id = "stat">
<datalist id = "status">
<option>Ativo</option>
<option>Inativo</option>
</datalist>
updateFilter(event: Event) {
this.filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = this.filterValue.trim().toLowerCase();
console.info(this.dataSource.filter);
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
Ответы 3
Angular Material предоставляет способ сказать, как фильтр должен применяться к данным с помощью метода filterPredicate: https://material.angular.io/components/table/api#MatTableDataSource
Предоставление функции стрелки для вашего источника данных, которая говорит, что значения должны быть строго равными, а не одинаковыми, должно решить вашу проблему.
this.datasource.filterPredicate = (data: YourDataType, filter: string) => {
return data.status === filter;
};
Это сработало очень хорошо, спасибо :)
Рад, что помог :)
Во-первых, если ваш фильтр имеет строгое значение, вам следует использовать не datalist, а select. Он работает так же, но не позволяет пользователю вводить данные.
Теперь нет причин, по которым вы сталкиваетесь с такой проблемой. Просто проверьте, достаточно ли (event.target as HTMLInputElement).value === 'ativo'.
Я рекомендую создать перечисление, чтобы избежать волшебной строки в вашем коде, поэтому вместо 'ativo' у вас будет UserStatus.ativo.
Вы можете использовать регулярное выражение для этого:
var myString = 'ativio';
var myString2 = 'inativio';
new RegExp('\bativio\b').test(myString); // true
new RegExp('\bativio\b').test(myString2); // false
Если у вас возникла проблема со строкой
ativoвinativo, значит, вы, вероятно, пытались использовать.includes('ativo')? Вам не нужно использовать этот метод — вы можете просто проверить равенство, что-то вродеuser.status == 'ativo'.