带有自定义过滤器的材料表不能用于用户查询搜索

Question

嗨所以我正在使用matTable，我有一个自定义过滤器过滤基于多列，但我有文本框，我想用它来搜索表，基于用户键入的查询，但文本框搜索似乎不起作用，我是一个初学者，任何帮助将非常感激

**This particular filter is not working**
applyFilter(event:Event) {
const filtervalue = (event.target as HTMLInputElement).value
this.dataSource.filter = filtervalue.trim().toLowerCase();
}

appcomponent.html

<div>
<mat-form-field
*ngFor="let filter of filterSelectObj"
style="margin-left: 15px;"
>
<mat-label>Filter {{ filter.name }}</mat-label>
<select
matNativeControl
name="{{ filter.columnProp }}"
[(ngModel)]="filter.modelValue"
(change)="filterChange(filter, $event)"
>
<option value="">-- Select {{ filter.name }} --</option>
<option [value]="item" *ngFor="let item of filter.options">
{{ item }}
</option>
</select>
</mat-form-field>
&nbsp;
<button mat-flat-button color="warn" (click)="resetFilters()">Reset</button>
</div>
<input
type="text"
id="fname"
name="fname"
(keyup)="applyFilter($event)"
placeholder="search"
/>
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>id</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>name</th>
<td mat-cell *matCellDef="let element">{{ element.name }}</td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef>username</th>
<td mat-cell *matCellDef="let element">{{ element.username }}</td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>email</th>
<td mat-cell *matCellDef="let element">{{ element.email }}</td>
</ng-container>
<ng-container matColumnDef="phone">
<th mat-header-cell *matHeaderCellDef>phone</th>
<td mat-cell *matCellDef="let element">{{ element.phone }}</td>
</ng-container>
<ng-container matColumnDef="website">
<th mat-header-cell *matHeaderCellDef>website</th>
<td mat-cell *matCellDef="let element">{{ element.website }}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>status</th>
<td mat-cell *matCellDef="let element">{{ element.status }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

appcomponent.ts

filterValues = {};
dataSource = new MatTableDataSource();
displayedColumns: string[] = [
'id',
'name',
'username',
'email',
'phone',
'website',
'status',
];
filterSelectObj = [];
constructor() {
// Object to create Filter for
this.filterSelectObj = [
{
name: 'ID',
columnProp: 'id',
options: [],
},
{
name: 'NAME',
columnProp: 'name',
options: [],
},
{
name: 'USERNAME',
columnProp: 'username',
options: [],
},
{
name: 'EMAIL',
columnProp: 'email',
options: [],
},
{
name: 'STATUS',
columnProp: 'status',
options: [],
},
];
}
ngOnInit() {
this.getRemoteData();
// Overrride default filter behaviour of Material Datatable
this.dataSource.filterPredicate = this.createFilter();
}
// Get Uniqu values from columns to build filter
getFilterObject(fullObj, key) {
const uniqChk = [];
fullObj.filter((obj) => {
if (!uniqChk.includes(obj[key])) {
uniqChk.push(obj[key]);
}
return obj;
});
return uniqChk;
}
// Get remote serve data using HTTP call
getRemoteData() {
const remoteDummyData = [
{
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: '[e-mail]',
phone: '1-770-736-8031 x56442',
website: 'hildegard.org',
status: 'Active',
},
{
id: 2,
name: 'Ervin Howell',
username: 'Antonette',
email: '[e-mail]',
phone: '010-692-6593 x09125',
website: 'anastasia.net',
status: 'Blocked',
},
{
id: 3,
name: 'Clementine Bauch',
username: 'Samantha',
email: '[e-mail]',
phone: '1-463-123-4447',
website: 'ramiro.info',
status: 'Blocked',
},
{
id: 4,
name: 'Patricia Lebsack',
username: 'Karianne',
email: '[e-mail]',
phone: '493-170-9623 x156',
website: 'kale.biz',
status: 'Active',
},
{
id: 5,
name: 'Chelsey Dietrich',
username: 'Kamren',
email: '[e-mail]',
phone: '[phone]',
website: 'demarco.info',
status: 'Active',
},
{
id: 6,
name: 'Mrs. Dennis Schulist',
username: 'Leopoldo_Corkery',
email: '[e-mail]',
phone: '1-477-935-8478 x6430',
website: 'ola.org',
status: 'In-Active',
},
{
id: 7,
name: 'Kurtis Weissnat',
username: 'Elwyn.Skiles',
email: '[e-mail]',
phone: '210.067.6132',
website: 'elvis.io',
status: 'Active',
},
{
id: 8,
name: 'Nicholas Runolfsdottir V',
username: 'Maxime_Nienow',
email: '[e-mail]',
phone: '586.493.6943 x140',
website: 'jacynthe.com',
status: 'In-Active',
},
{
id: 9,
name: 'Glenna Reichert',
username: 'Delphine',
email: '[e-mail]',
phone: '[phone] x41206',
website: 'conrad.com',
status: 'In-Active',
},
{
id: 10,
name: 'Clementina DuBuque',
username: 'Moriah.Stanton',
email: '[e-mail]',
phone: '024-648-3804',
website: 'ambrose.net',
status: 'Active',
},
];
this.dataSource.data = remoteDummyData;
this.filterSelectObj.filter((o) => {
o.options = this.getFilterObject(remoteDummyData, o.columnProp);
});
}
// Called on Filter change
filterChange(filter, event) {
//let filterValues = {}
this.filterValues[filter.columnProp] = event.target.value
.trim()
.toLowerCase();
this.dataSource.filter = JSON.stringify(this.filterValues);
}
// Custom filter method fot Angular Material Datatable
createFilter() {
let filterFunction = function (data: any, filter: string): boolean {
let searchTerms = JSON.parse(filter);
let isFilterSet = false;
for (const col in searchTerms) {
if (searchTerms[col].toString() !== '') {
isFilterSet = true;
} else {
delete searchTerms[col];
}
}
console.log(searchTerms);
let nameSearch = () => {
let found = false;
if (isFilterSet) {
for (const col in searchTerms) {
searchTerms[col]
.trim()
.toLowerCase()
.split(' ')
.forEach((word) => {
if (
data[col].toString().toLowerCase().indexOf(word) != -1 &&
isFilterSet
) {
found = true;
}
});
}
return found;
} else {
return true;
}
};
return nameSearch();
};
return filterFunction;
}
// Reset table filters
resetFilters() {
this.filterValues = {};
this.filterSelectObj.forEach((value, key) => {
value.modelValue = undefined;
});
this.dataSource.filter = '';
}
applyFilter(event:Event) {
const filtervalue = (event.target as HTMLInputElement).value
this.dataSource.filter = filtervalue.trim().toLowerCase();
}

查找下面的stackblitz

StackBlitz

Answer 1

你可能不需要添加那么多代码，试试下面的代码

createFilter() {
return (data: any, filter: string): boolean => {
return Object.values(data).toString().toLowerCase().indexOf(filter) > -1 ? true: false
}
}