时间戳

首页 > 解决方案 > 如何精确匹配 Angular 材料表中选择的过滤器字符串数据？

angular - 如何精确匹配 Angular 材料表中选择的过滤器字符串数据？

问题描述

我正在尝试按生产或应用程序名称过滤我的表。我已将本指南https://www.freakyjolly.com/angular-material-table-custom-filter-using-select-box/用于我的方法，除了生产或应用程序的一部分之外，一切正常相同的字符串完全相同。

例如，如果我在我的过滤器第二个应用程序中选择它应该只显示我有第二个应用程序的行，而不是它显示名称中有“应用程序”的每一行。

我不知道如何编辑此过滤器逻辑以完全匹配来自 select 的字符串

// Custom filter method fot Angular Material Datatable
  createFilter() {
    let filterFunction = function (data: any, filter: string): boolean {
      let searchTerms = JSON.parse(filter);
      let isFilterSet = false;
      for (const col in searchTerms) {
        if (searchTerms[col].toString() !== '') {
          isFilterSet = true;
        } else {
          delete searchTerms[col];
        }
      }
      
      let nameSearch = () => {
        let found = false;
        if (isFilterSet) {
          for (const col in searchTerms) {
            searchTerms[col].trim().toLowerCase().split(' ').forEach(word => {
              if (data[col].toString().toLowerCase().indexOf(word) != -1 && isFilterSet) {
                found = true
              }
            });
          }
          return found
        } else {
          return true;
        }
      };
      return nameSearch()
    };
    return filterFunction
  }

标签： angularangular-materialangular-filtersmat-table

解决方案

我想我设法做到了这一点，它可以按我的意愿工作。我只是按列完全过滤：

filterValues = {
 prodName: '',
 appName: ''
};

然后我写了这个过滤器：

  columnFilter(): (data: any, filter: string) => boolean {
    let filterFunction = function(data, filter): boolean{
      let searchTerms = JSON.parse(filter);
      return data.prodName.toLowerCase().indexOf(searchTerms.prodName) !== -1
      && data.appName.toLowerCase().indexOf(searchTerms.appName) !== -1;
    };
    return filterFunction;
  }

推荐阅读