angular - 如何使用通配符过滤 MatTableDataSource

Question

我正在使用Table with filtering来自 Angular Material 网站的示例https://material.angular.io/components/table/examples

我想让用户使用通配符进行搜索。在这种情况下，一个%

我写了以下内容：

    const filterValue = (event.target as HTMLInputElement).value;

    let filterArray = filterValue.trim().toLowerCase().split("%");

    for (let fil of filterArray) {
      //I know this line below won't work, as it will just replace the filter with each iteration, but showing for sake of example
      this.tableData.filter = fil;
      
    }

因此，如果用户one%two在输入字段中键入，我希望过滤器找到在行中某处同时存在单词“one”和“two”的表行。

我尝试了几种代码变体，但似乎没有什么能正常工作。关于如何使这项工作的任何想法？

标签： angulartypescriptangular-material

Answer 1

您必须像这样覆盖默认实现this.dataSource.filterPredicate：

constructor() {
    this.dataSource.filterPredicate = ((data, filters) => {
      let match = false;
      const filtersList = JSON.parse(filters);

      filtersList.forEach(filterObj => {
        match =
          match || !filterObj ||
          Object.values(data)
            .map(t => t.toLocaleString().toLocaleLowerCase())
            .includes(filterObj);
      });
      return match;
    }) as (PeriodicElement, string) => boolean;
  } 

在您的applyFilter方法中，您需要像这样将数组传递filterPredicate给JSON.stringify(filterArray);：

applyFilter(filterValue: KeyboardEvent) {
    let filterArray = (filterValue.target as any).value
      .trim()
      .toLowerCase()
      .split('%');
    this.dataSource.filter = JSON.stringify(filterArray);
  } 

这是我为您编写的完整工作示例。