具有空格的列值的材料表数据源过滤器答案

【问题标题】：Material table datasource filter with column value having space具有空格的列值的材料表数据源过滤器
【发布时间】：2020-03-03 00:36:50
【问题描述】：

我们会过滤具有包含空格的值的列，例如：'Test 1'、'Test 12'、'Test 3'

我做了一个这样的自定义谓词

this.dataSource.filterPredicate = function(data: any, filterValue: string) {
      return data.UserName /** replace this with the column name you want to filter */
        .replace(/\s/g, "").trim()
        .toLocaleLowerCase().indexOf(filterValue.replace(/\s/g, "").trim().toLocaleLowerCase()) >= 0;
    };

然后是一个函数applyFilter：

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

我仍然遇到问题：我搜索“测试 1”，我在结果数据源测试 2、测试 3、测试 4 中看到...

我想我错过了什么

感谢您的帮助

劳伦特

【问题讨论】：

我没有在我的 filterPredicate 中看到 console.log。我想知道 filterPredicate 是否被触发

标签： angular material-design

【解决方案1】：

我认为你的索引搜索必须 > 0

indexOf(...) > 0

【讨论】：

感谢您的回答，但不，同样的问题
在 Stackblitz 上我没有问题 stackblitz.com/edit/demo-y1a9ws 。而且我在 TS 文件中有相同的代码用于过滤。
在我桌面上的代码中，它不起作用。我在 customFilterPredicate 函数中有一个日志，但我没有看到 trace ，而我在 Stackblitz 上看到了它。 filterPredicate 的函数似乎没有在本地触发。
我升级到 Angular 9（包括角度/材料）与 Stackblitz 相同的版本，同样的问题

【解决方案2】：

解决了这个问题，它独立于 Angular 9，但我的错误在于异步

【讨论】：