Question

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

见下面的代码：

@NgModule({
  declarations: [DefaultPipe],
  exports: [DefaultPipe]
})
export class DefaultPipeModule{}

@NgModule({
  imports: [DefaultPipeModule],
  declarations: [LoginComponent]
})
export class FooModule {}

@NgModule({
  imports: [DefaultPipeModule],
  declarations: [FooComponent] // fooComponent also uses the default pipe, so we need to import its module
})
export class SomeOtherModule{}

和我的 .ts ：

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

Answer 1

HTML 在applyFilter传递输入值＆amp;中添加7个差异输入字段该列的键为字符串

<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的过滤器obj：列密钥＆amp; 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更新为：

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表与Angular材料

1 个答案: