带有列值的材料表数据源过滤器 [英] Material table datasource filter with column value
问题描述
如何过滤具有特定列的材料数据表?
公共数据源；this.dataSource = new MatTableDataSource(this.items);this.dataSource.filterPredicate = function customFilter(data , filter:string ): boolean {返回 (data.name.startsWith(filter));}应用过滤器(过滤器值:字符串){filterValue = filterValue.trim();//去除空格filterValue = filterValue.toLowerCase();//MatTableDataSource 默认为小写匹配this.dataSource.filter = filterValue;}<小时>
上面的代码不起作用，当我输入时返回，因为没有匹配的数据.
来自文档.
<块引用>例如，数据对象 {id: 123, name: 'Mr.Smith', favoriteColor: 'blue'} 将减少到 123mr.史密斯蓝.如果您的过滤器字符串为蓝色，那么它将被视为匹配项，因为它包含在缩减字符串中，并且该行将显示在表格中.
要覆盖默认过滤行为，自定义 filterPredicate可以设置接受数据对象和过滤字符串的函数如果数据对象被视为匹配，则返回 true.
如果您只想使用过滤器特定的列，您需要覆盖 filterPredicate 并且答案已经是 此处.
这是过滤的工作示例.
table-filtering-example.html
<div class="example-header"><mat-form-field><input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"></mat-form-field><mat-table #table [dataSource]="dataSource"><!-- 位置列--><ng-container matColumnDef="position"><mat-header-cell *matHeaderCellDef>号</mat-header-cell><mat-cell *matCellDef="let element">{{element.position}} </mat-cell></ng-容器><!-- 名称列--><ng-container matColumnDef="name"><mat-header-cell *matHeaderCellDef>名称</mat-header-cell><mat-cell *matCellDef="let element">{{element.name}} </mat-cell></ng-容器><!-- 权重栏--><ng-container matColumnDef="weight"><mat-header-cell *matHeaderCellDef>重量</mat-header-cell><mat-cell *matCellDef="let element">{{element.weight}} </mat-cell></ng-容器><!-- 符号列--><ng-container matColumnDef="symbol"><mat-header-cell *matHeaderCellDef>符号</mat-header-cell><mat-cell *matCellDef="let element">{{element.symbol}} </mat-cell></ng-容器><mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row><mat-row *matRowDef="let row; columns:displayedColumns;"></mat-row></mat-table>
table-filtering-example.ts
import {Component} from '@angular/core';从@angular/material"导入{MatTableDataSource}；/*** @title 表带过滤*/@成分({选择器:'表过滤示例'，styleUrls: ['table-filtering-example.css'],templateUrl: 'table-filtering-example.html',})导出类 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'}，{位置:6，名称:'碳'，重量:12.0107，符号:'C'}，{位置:7，名称:'氮'，重量:14.0067，符号:'N'}，{位置:8，名称:'氧气'，重量:15.9994，符号:'O'}，{位置:9，名称:'氟'，重量:18.9984，符号:'F'}，{位置:10，名称:'霓虹'，重量:20.1797，符号:'Ne'}，{位置:11，名称:'钠'，重量:22.9897，符号:'Na'}，{位置:12，名称:'镁'，重量:24.305，符号:'镁'}，{位置:13，名称:'铝'，重量:26.9815，符号:'铝'}，{位置:14，名称:'硅'，重量:28.0855，符号:'Si'}，{位置:15，名称:'磷'，重量:30.9738，符号:'P'}，{位置:16，名称:'硫'，重量:32.065，符号:'S'}，{位置:17，名称:'氯'，重量:35.453，符号:'Cl'}，{位置:18，名称:'氩'，重量:39.948，符号:'Ar'}，{位置:19，名称:'钾'，重量:39.0983，符号:'K'}，{位置:20，名称:'钙'，重量:40.078，符号:'Ca'}，];<小时>
您可以使用 filterPredicate 来过滤特定的列，如下所示:
ngOnInit() {this.dataSource.filterPredicate = (data: Element, filter: string) =>{返回 data.name == 过滤器；};}应用过滤器(过滤器值:字符串){//filterValue = filterValue.trim();//去除空格//filterValue = filterValue.toLowerCase();//MatTableDataSource 默认为小写匹配this.dataSource.filter = filterValue;}我更改了 applyFilter() 并添加了 ngOnInit().现在它只工作 name 列和完全相同的值 (==)
How can I filter the material data table with specific column ?
public dataSource;
this.dataSource = new MatTableDataSource(this.items);
this.dataSource.filterPredicate = function customFilter(data , filter:string ): boolean {
return (data.name.startsWith(filter));
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
The above code is not working, when I type returns as no data is matched.
From the docs.
For example, the data object {id: 123, name: 'Mr. Smith', favoriteColor: 'blue'} will be reduced to 123mr. smithblue. If your filter string was blue then it would be considered a match because it is contained in the reduced string, and the row would be displayed in the table.
To override the default filtering behavior, a custom filterPredicate function can be set which takes a data object and filter string and returns true if the data object is considered a match.
If you want to use filter only specific columns you need to override filterPredicate and the answer already is here.
This is the working example for filtering.
table-filtering-example.html
<div class="example-container mat-elevation-z8">
<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">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
table-filtering-example.ts
import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';
/**
* @title Table with filtering
*/
@Component({
selector: 'table-filtering-example',
styleUrls: ['table-filtering-example.css'],
templateUrl: 'table-filtering-example.html',
})
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;
}
}
export interface Element {
name: string;
position: number;
weight: number;
symbol: string;
}
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'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'}, ];
you can use filterPredicate to filter specific column like this:
ngOnInit() {
this.dataSource.filterPredicate = (data: Element, filter: string) => {
return data.name == filter;
};
}
applyFilter(filterValue: string) {
// filterValue = filterValue.trim(); // Remove whitespace
// filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
I have changed the applyFilter() and added ngOnInit(). Now it is working only name column and exactly same value (==)
这篇关于带有列值的材料表数据源过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
