FilterPredicate Table by Colomn with Angular Material [英] FilterPredicate Table by Colomn with Angular Material

问题描述

我想使用谓词过滤器按列过滤我的 mat-table 结果.我已经在使用一个简单的过滤器，但它过滤了所有列中的所有数据.我搜索类似的主题，但我不知道如何使用它.我尝试为所有列重复我的代码，但不起作用..

见下面的代码:

<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-h​​eader-cell *matHeaderCellDef mat-sort-header>aa title</mat-h​​eader-cell><mat-cell *matCellDef="let user">{{user.aa}} </mat-cell></ng-容器><ng-container matColumnDef="bb"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>bb 倾斜 </mat-h​​eader-cell><mat-cell *matCellDef="let user">{{user.bb}} </mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns"></mat-h​​eader-row><mat-row *matRowDef="let row; columns:displayedColumns;"></mat-row></mat-table><mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

和我的.ts:

导出类 MynewComponent 实现 OnInit {数据源 = 新的 MatTableDataSource();displayColumns = ['aa', 'bb'];@ViewChild(MatPaginator) 分页器:MatPaginator；@ViewChild(MatSort) 排序:MatSort；构造函数(私有材料服务:材料服务){}ngOnInit() {this.materialService.getUser().subscribe(value =>{this.dataSource.data = value;});this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;}应用过滤器(过滤器值:字符串){filterValue = filterValue.trim();//去除空格filterValue = filterValue.toLowerCase();//数据源默认为小写匹配this.dataSource.filter = filterValue;如果(this.dataSource.paginator){this.dataSource.paginator.firstPage();}}}导出类 UserDataSource 扩展了 DataSource{构造函数(私有材料服务:材料服务){极好的();}connect(): Observable{返回 this.materialService.getUser();}断开连接(){}}

解决方案

HTML 在 applyFilter 中添加 7 个 diff 输入字段并传递输入值 &该列的键作为字符串

<input matInput (keyup)="applyFilter($event.target.value, 'aa')" placeholder="过滤器"></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="过滤器"></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 = {};应用过滤器(过滤器值:字符串，键:字符串){this.filterObj = {值:filterValue.trim().toLowerCase(),钥匙:钥匙}this.dataSource.filter = filterValue;如果(this.dataSource.paginator){this.dataSource.paginator.firstPage();}}

更新 filterPredicate 为:

this.dataSource.filterPredicate = (data, filter) =>{if(data[this.filterObj['key']] && this.filterObj['key']) {返回数据[this.filterObj['key']].toLowerCase().includes(this.filterObj['value']);}返回假；}

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..

See code below :

<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>

and my .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 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>

You can find other ways of writing HTML according to your requirement of design.

component

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();
    }
}

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;
}

这篇关于FilterPredicate Table by Colomn with Angular Material的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！