Я думаю, вы просто забыли вызвать toLowerCase()
для searchString.name
data.name.toString (). Trim (). ToLowerCase (). IndexOf (searchString.name.toLowerCase ())!== -1;
РЕДАКТИРОВАТЬ: Один из подходов заключается в создании поля глобального фильтра в классе компонентов.
globalFilter = '';
<mat-form-field>
<input matInput [ngModel]="globalFilter" (ngModelChange)="applyFilter($event)" placeholder="Filter">
</mat-form-field>
applyFilter(filter) {
this.globalFilter = filter;
this.dataSource.filter = JSON.stringify(this.filteredValues);
}
Затем попробуйте сначала выполнить фильтрацию, используя глобальный фильтр, перед другими полями.
customFilterPredicate() {
const myFilterPredicate = (data: PeriodicElement, filter: string): boolean => {
var globalMatch = !this.globalFilter;
if (this.globalFilter) {
// search all text fields
globalMatch = data.name.toString().trim().toLowerCase().indexOf(this.globalFilter.toLowerCase()) !== -1;
}
if (!globalMatch) {
return;
}
let searchString = JSON.parse(filter);
return data.position.toString().trim().indexOf(searchString.position) !== -1 &&
data.name.toString().trim().toLowerCase().indexOf(searchString.name.toLowerCase()) !== -1;
}
return myFilterPredicate;
}
Вот рабочее приложение: https://stackblitz.com/edit/angular-hbakxo-5jeaic