时间戳

首页 > 解决方案 > 具有角材料的多个过滤器

angular - 具有角材料的多个过滤器

问题描述

我正在使用 Angular 材料进行造型的 Angular 8 项目。我使用了带有过滤器的 mat-table 来过滤 mat-table 中的数据。默认的 mat-table 过滤器过滤包含输入字符的数据。但我想一次使用两个过滤器和 mat-table，即默认过滤器和一个按域（表中的列）过滤器，它将使用下拉列表进行过滤。经过研究，我发现我可以通过定义一个 filterPredicate 来使用列过滤数据，该 filterPredicate 需要一个列进行过滤，但是有什么方法可以同时使用默认过滤器和列过滤器？

下面是我的过滤代码和截图

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

 // Below method is in complete and will be implemented for Domain Filter

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

Mat-Table 使用两个过滤器 1.default 过滤器 2.ProjectDomain 过滤器

谢谢

标签： angularangular-materialangular8

解决方案

我总是使用一种方法来设置由字符串类型确定的多个过滤器。

applyFilter(value: any, type: string) {
  switch(type) {
    case 'name':
      this.filterObject.name = value;
      break;
    case 'domain':
      this.filterObject.domain = value;
      break;
    default:
      break;
  }
  this.dataSource.filter = JSON.stringify(this.filterObject);
}

在我的过滤谓词中，您可以决定是否要完全匹配所有过滤器或至少一个过滤器。我总是将过滤器与逻辑AND.

this.dataSource.filterPredicate = (obj, filterStr) => {
  let filterObj = JSON.parse(filterStr);
  if(obj.name.toLowerCase().includes(filterObj.name.toLowerCase()) && obj.domain.toLowerCase().includes(filterObj.domain.toLowerCase())) {
    return true;
  } else {
    return false;
  }
}

推荐阅读