Angular Mat Table 如何使用 2 个条件过滤值答案

【问题标题】：Angular Mat Table How to filter values using 2 conditionsAngular Mat Table 如何使用 2 个条件过滤值
【发布时间】：2022-01-27 03:42:04
【问题描述】：

我有一个带有 2 个过滤器选项条件的垫表。我可以使用一种条件进行过滤，就像在 MatTableDatasource 上的普通过滤器一样，就像我选择一个出纳员姓名或一个交替的日期，

但是，如果我设置两个过滤条件，则无法过滤

出纳员姓名和她今天的收款日期。

HTML

                <label>Teller Name: </label>
                  <select  
                   name="tellerName" 
                   (change)="applyFilter($any($event.target).value)">
                <option value="{{tellerList.collectorName}}"
                    *ngFor ="let tellerList of tellerList"
                >{{tellerList.collectorName}}</option>
                </select>   

                <label>Collection Date:</label>
                    <input 
                     type="date" 
                     name="collectionDate" 
                     (change)="applyFilter($any($event.target).value)"   
                    >

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

数据源是通过一个可观察的服务来自一个火库

 this.customerService.getDeposit().subscribe( depObs => {
      this.depositList = depObs;
      this.dataDepoSource = new MatTableDataSource(depObs);
    });

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以使用MatTableDataSource 的filterPredicate 属性，这样您就可以创建自己的custom filter 以适应不同的用例。

所以您的自定义过滤器函数将如下所示：

filterPredicate = (data: any): boolean => {
   if (
     // create a separate function checkDate, to check if Date filter fulfills your criteria.
     // it should return a boolean.

     this.matchDate(data.collectionDate) &&
     // You can directly check for collector name as it would be a simple check
     data.collectorName.indexOf(this.searchedCollectorName) > -1
   )    {
     return true;
   }
   return false;
};

您必须将您的 dataSource 与新的自定义 filterPredicate 绑定

this.dataDepoSource = new MatTableDataSource(depObs);
this.dataDepoSource.filterPredicate = this.filterPredicate

您必须将searchedCollectorName 与输入字段绑定，对于 selectedDate，以便您的 filterPredicate 可以同时拥有这两个值（如果应用了任何过滤器）

您可以使用Template Driven 或Reactive Forms 将HTML input 和select 与.ts 绑定。如果我们使用模板驱动。您的 HTML 将如下所示：

  <label>Teller Name: </label>
  <select name="tellerName" [(ngModel)]="searchCollectorName" (change)="applyFilter()">
     <option value="{{tellerList.collectorName}}" *ngFor ="let tellerList of tellerList">
      {{tellerList.collectorName}}
     </option>
  </select>   

  <label>Collection Date:</label>
  <input [(ngModel)]="selectedDate" type="date" name="collectionDate" (change)="applyFilter()">

最后你必须手动触发MatTableDataSource过滤方法因此有了applyFilter()，我们只需在HTML 中执行此操作：

applyFilter():void {
   this.dataDepoSource.filter = 'filterApplied';
}

【讨论】：