带角材料的Colomn FilterPredicate表 [英] FilterPredicate Table by Colomn with Angular Material
问题描述
我想使用谓词过滤器按列过滤我的mat-table结果.我已经在使用一个简单的过滤器,但是它过滤了所有列中的所有数据.我搜索类似的主题,但我不知道如何使用它.我尝试对所有列重复我的代码,但是不起作用.
I would like to filter my mat-table result by column using the predicate filter. Im already using a simple filter but it filtering all the data in all the column. I search for similar topics but i don't know how use it. I try to repeat my code for all the column but doesn't work..
请参见下面的代码:
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="example-container mat-elevation-z8">
<div class="example-header">
<div>
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="aa">
<mat-header-cell *matHeaderCellDef mat-sort-header>aa title</mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.aa}} </mat-cell>
</ng-container>
<ng-container matColumnDef="bb">
<mat-header-cell *matHeaderCellDef mat-sort-header> bb tilte </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.bb}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</div>
</div>
和我的 .ts :
export class MynewComponent implements OnInit {
dataSource = new MatTableDataSource();
displayedColumns = ['aa', 'bb'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private materialService: MaterialService) {}
ngOnInit() {
this.materialService.getUser().subscribe(value =>{this.dataSource.data = value;});
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
export class UserDataSource extends DataSource<any> {
constructor(private materialService: MaterialService) {
super();
}
connect(): Observable<MaterialModel[]> {
return this.materialService.getUser();
}
disconnect() {}
}
推荐答案
HTML 还在 applyFilter
中添加7个差异输入字段,以通过输入值&该列的键为字符串
HTML Add 7 diff input fields also in applyFilter
pass input value & a key of that column as string
<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的方法.
You can find other ways of writing HTML according to your requirement of design.
组件
创建具有 key
的过滤器obj:列键& value
:过滤值
Create filter obj having key
: Column key & value
: filter 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();
}
}
将 filterPredicate
更新为:
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;
}
这篇关于带角材料的Colomn FilterPredicate表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!