如何修改数据表过滤器在 Angular Material 中的工作方式? [英] How to modify the way the data table filter works in Angular Material?

问题描述

我正在尝试在 Angular Material Data Table 中使用过滤器，例如 -

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

如果我搜索MATCHED"，那么MATCHED"和UNMATCHED"都会出现在数据的状态列中表.

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

我知道这是因为数据对象被减少和连接并应用了过滤器(来自 Angular Material 文档).

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.

推荐答案

给你 - StackBlitz

根据您提到的答案，我们需要定义 filterPredicate :

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();
  }
}

请注意，toLowerCase() 已从 filterValue.trim() 中删除.

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

这篇关于如何修改数据表过滤器在 Angular Material 中的工作方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！