mat-table 中的自定义过滤器 [英] custom filter in mat-table

问题描述

我正在使用 mat-table.它有一个过滤器，适用于文档示例:

来自 https://material.angular.io/components/table/overview，原代码为:

 
<mat-form-field><input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"></mat-form-field>
<mat-table #table [dataSource]="dataSource"><!-- 其余代码--></mat-table>

 导出类 TableFilteringExample {displayColumns = ['位置'，'名称'，'重量'，'符号'];数据源 = 新的 MatTableDataSource(ELEMENT_DATA);应用过滤器(过滤器值:字符串){filterValue = filterValue.trim();//去除空格filterValue = filterValue.toLowerCase();//MatTableDataSource 默认为小写匹配this.dataSource.filter = filterValue;}}const ELEMENT_DATA: 元素 [] = [{位置:1，名称:'氢'，重量:1.0079，符号:'H'}，{位置:2，名称:'Helium'，重量:4.0026，符号:'He'}，{位置:3，名称:'锂'，重量:6.941，符号:'锂'}，{位置:4，名称:'铍'，重量:9.0122，符号:'Be'}，{位置:5，名称:'硼'，重量:10.811，符号:'B'}];

通过这个实现，当过滤时，它过滤任何列.

现在我正在尝试更改过滤器，因为我想要的是仅用于名称"列的过滤器，因此我正在尝试重写过滤器并分配给 filterData.

 applyFilter(filterValue: string) {filterValue = filterValue.trim();//去除空格filterValue = filterValue.toLowerCase();//MatTableDataSource 默认为小写匹配this.dataSource.filteredData = this.filterByEmail(filterValue);console.log(this.dataSource.filteredData);//值是我想要的.}filterByName(过滤器:字符串):任何{const dataFiltered = this.data.filter(function(item){返回 item.name.indexOf(filter) >-1})返回数据过滤；}

在控制台中，我可以看到 this.dataSource.filteredData 有我想打印的数据，但表没有重新加载.

我错过了什么?

解决方案

我找到了解决方案 此处.

需要重写filterPredicate，照常使用即可，filterPredicate需要在filter通过时返回true，false 没有时

export interface Element {名称:字符串；位置:编号；重量:数量；符号:字符串；}数据源 = 新的 MatTableDataSource(ELEMENT_DATA);/* 配置过滤器 */this.dataSource.filterPredicate =(数据:元素，过滤器:字符串)=>data.name.indexOf(filter) != -1;应用过滤器(过滤器值:字符串){filterValue = filterValue.trim();//去除空格filterValue = filterValue.toLowerCase();//MatTableDataSource 默认为小写匹配this.dataSource.filter = filterValue;}

I'm using mat-table. It has a filter which works fine with doc example:

From https://material.angular.io/components/table/overview, the original code is:

    <div class="example-header">
       <mat-form-field>
         <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
       </mat-form-field>
   </div>

   <mat-table #table [dataSource]="dataSource">
      <!-- the rest of the code -->
   </mat-table>

    export class TableFilteringExample {
     displayedColumns = ['position', 'name', 'weight', 'symbol'];
     dataSource = new MatTableDataSource(ELEMENT_DATA);

     applyFilter(filterValue: string) {
       filterValue = filterValue.trim(); // Remove whitespace
       filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
       this.dataSource.filter = filterValue;
     }
    }
    const ELEMENT_DATA: Element[] = [
     {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
     {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
     {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
     {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
     {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}
    ]; 

With this implementation, when filter, it filter for any column.

Now I'm trying to change the filter because I want is filter just for "name" column, so I'm trying to rewrite the filter and assign to filterData.

      applyFilter(filterValue: string) {
        filterValue = filterValue.trim(); // Remove whitespace
        filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
       this.dataSource.filteredData = this.filterByEmail(filterValue); 
        console.log(this.dataSource.filteredData); //value is what I want.
    }

    filterByName(filter: string): any {
      const dataFiltered = this.data.filter(function(item){
         return item.name.indexOf(filter) > -1
       })
        return dataFiltered;
    }

In console, I can see this.dataSource.filteredData has the data I want to print, but table is not reload.

What are I'm missing?

解决方案

I found the solution here.

It's necessary to rewrite filterPredicate, and just use it as usual, filterPredicate needs to return true when filter passes and false when it doesn't

export interface Element {
 name: string;
 position: number;
 weight: number;
 symbol: string;
}


dataSource = new MatTableDataSource(ELEMENT_DATA);
/* configure filter */
this.dataSource.filterPredicate = 
  (data: Element, filter: string) => data.name.indexOf(filter) != -1;


applyFilter(filterValue: string) {
   filterValue = filterValue.trim(); // Remove whitespace
   filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
   this.dataSource.filter = filterValue;
 }

这篇关于mat-table 中的自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！