我正在使用mat-table。它有一个筛选器,与doc示例配合得很好:
从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'}
];
通过这种实现方式,当过滤时,它会过滤所有列。
现在我想要更改过滤器,只想过滤"名称"列,因此我正在尝试重写过滤器并将其分配给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具有我想要打印的数据,但是表格没有重新加载。
我错过了什么?