Приведенная ниже функция не работает в первый раз, когда мы вводим первую букву в строку поиска, и она ничего не возвращает в массиве, а позже, когда мы удаляем букву и продолжаем вводить, она работает нормально.
createFilterPredicate() {
let myFilterPredicate = function(data:any, filter:string): boolean {
console.log('data:', data);
let searchString = JSON.parse(filter);
return data.admissionno.toString().trim().indexOf(searchString.admissionno) !== -1 &&
data.firstname.toString().trim().toLowerCase().indexOf(searchString.firstname.toLowerCase()) !== -1;
}
return myFilterPredicate;
}
На самом деле, когда я отлаживаю, я вижу, что он входит в функцию. После этого он не входит в функцию myFilterPredicate
и не выводит данные в консоли и ничего не возвращает. в чем проблема и как ее найти? ..
Полный код ниже:
ngOnInit(): void {
this.admissionNoFilter.valueChanges.subscribe((admissionno) => {
this.filteredValues['admissionno'] = admissionno;
this.dataSource.filter = JSON.stringify(this.filteredValues);
});
this.studentNameFilter.valueChanges.subscribe((firstname) =>{
this.filteredValues['firstname'] = firstname;
this.dataSource.filter = JSON.stringify(this.filteredValues);
});
this.dataSource.filterPredicate = this.createFilterPredicate();
}
createFilterPredicate() {
let myFilterPredicate = function(data:any, filter:string): boolean {
console.log('data:', data);
let searchString = JSON.parse(filter);
return data.admissionno.toString().trim().indexOf(searchString.admissionno) !== -1 &&
data.firstname.toString().trim().toLowerCase().indexOf(searchString.firstname.toLowerCase()) !== -1;
}
return myFilterPredicate;
}
компонент. html
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="admissionno">
<th mat-header-cell *matHeaderCellDef> <Strong> Admission No </Strong>
<div>
<mat-form-field>
<input matInput class="form-field" [formControl]="admissionNoFilter" placeholder="Filter">
</mat-form-field>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.admissionno}} </td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef > <Strong> Student Name </Strong>
<div>
<mat-form-field>
<input matInput class="form-field" [formControl]="studentNameFilter" placeholder="Name Filter">
</mat-form-field>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.firstname + ' ' + element.lastname}} </td>
</ng-container>
</table>