How to modify the way the data table filter works in Angular Material?

淺唱寂寞╮ 提交于 2019-12-24 10:45:40

问题


I am trying to use the filter in Angular Material Data Table like -

If I search for "MATCHED", then both "MATCHED" and "UNMATCHED" comes up in the status column of the Data table.

I know that it is because the data object is reduced and concatenated and the filter is applied(from the Angular Material Docs).

I want to display only the "MATCHED" status, if is search for matched. So I am looking for a filter that will do exact word filtering instead of substrings. How to proceed ?

I read this post but I was not able to proceed.


回答1:


Here you go - StackBlitz

Following on from the answer that you referred to we need to define filterPredicate :

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

  constructor() {
    this.dataSource.filterPredicate = (data: PeriodicElement, filter: string) => {
      return data.name === filter;
    }
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim();
  }
}

Note that toLowerCase() has been removed from filterValue.trim().



来源:https://stackoverflow.com/questions/52093585/how-to-modify-the-way-the-data-table-filter-works-in-angular-material

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!