HTML 还添加 7 个差异输入字段applyFilter
将输入值和该列的键作为字符串传递
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value, 'aa')" placeholder="Filter">
</mat-form-field>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value, 'bb')" placeholder="Filter">
</mat-form-field>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value, 'col3')" placeholder="Filter">
</mat-form-field>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value, 'col4')" placeholder="Filter">
</mat-form-field>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value, 'col5')" placeholder="Filter">
</mat-form-field>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value, 'col6')" placeholder="Filter">
</mat-form-field>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value, 'col7')" placeholder="Filter">
</mat-form-field>
您可以根据您的设计要求找到其他编写 HTML 的方式。
成分
创建过滤器对象具有key
: 列键 &value
:过滤值
filterObj = {};
applyFilter(filterValue: string, key: string) {
this.filterObj = {
value: filterValue.trim().toLowerCase(),
key: key
}
this.dataSource.filter = filterValue;
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
update filterPredicate
as:
this.dataSource.filterPredicate = (data, filter) => {
if(data[this.filterObj['key']] && this.filterObj['key']) {
return data[this.filterObj['key']].toLowerCase().includes(this.filterObj['value']);
}
return false;
}