mat-table自定义过滤器
mat-table自定义过滤器
提问于 2018-01-30 01:16:54
我用的是桌垫。它有一个过滤器，可以很好地与文档示例配合使用：
在https://material.angular.io/components/table/overview中，原始代码是：
<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'}
]; 使用此实现时，当过滤时，它会过滤任何列。
现在我正在尝试更改过滤器，因为我只想对"name“列使用过滤器，所以我尝试重写过滤器并将其分配给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;
}在控制台中，我可以看到this.dataSource.filteredData有我想要打印的数据，但是表没有重新装载。
我漏掉了什么？
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-01-31 18:58:05
我找到了解决方案here。
有必要重写filterPredicate，并像往常一样使用它，当过滤器通过时，filterPredicate需要返回true，当它没有通过时，返回false
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;
}Stack Overflow用户
发布于 2018-08-01 01:20:38
不要忘记对数据应用.trim().toLowerCase()，否则可能会遇到意想不到的结果。下面是我的例子：
this.dataSource.filterPredicate = (data:
{name: string}, filterValue: string) =>
data.name.trim().toLowerCase().indexOf(filterValue) !== -1;
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}Stack Overflow用户
发布于 2019-08-29 14:51:51
请注意，显示在表行中的类的所有字段都要进行筛选，即使不将该字段显示为列也是如此。
export class City {
id: number;//is not displayed in mat table
code: string;
name: string;
country:Country;
}任何针对城市表的dataSource的过滤器也适用于id列，通常我们不会向最终用户显示该列。
//this filter will also apply to id column
this.cityDataSource.filter = filterValue;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48506606
复制相关文章
相似问题
腾讯云开发者
