如何在多列下拉列表中过滤 Angular Mat Table答案

【问题标题】：How to filter Angular Mat Table on multiple column dropdowns如何在多列下拉列表中过滤 Angular Mat Table
【发布时间】：2020-08-18 16:36:44
【问题描述】：

我正在尝试过滤每个列标题中下拉值的角度垫表。我可以过滤任何一个下拉值，但不能过滤多个下拉值。是否可以在多个下拉列表中？这是我尝试过的..

HTML

          <table mat-table  [dataSource]="listData">
            <ng-container matColumnDef="Name">
             <th mat-header-cell *matHeaderCellDef>Name
             <br>
               <mat-form-field>
               <select matNativeControl (change)="onChangeName($event.target.value)">
                 <option *ngFor="let name of names" [value]="name">
                   {{name | titlecase}}
                 </option>
                </select>
              </mat-form-field>
             </th>
             <td mat-cell *matCellDef="let row; let rowIndex = index" >
             {{row.name}}
             </td>
          </ng-container>
          <ng-container matColumnDef="location ">
              <th mat-header-cell *matHeaderCellDef>Location
                <mat-form-field>
                    <select matNativeControl (change)="onChangeLocation($event.target.value)">
                      <option *ngFor="let location of locations" [value]="location">
                        {{track | titlecase}}
                    </option>
                    </select>
                  </mat-form-field>
             </th>
             <td mat-cell *matCellDef="let row; let rowIndex = index" >
             {{row.location}}
             </td>
           </ng-container>
         </table>

TS 文件

          ngOnInit(): void {
          this.listData=new MatTableDataSource(res);
          }

         onChangeName(name){
          this.selectedName=name;
          if(this.selectedLocation){
          this.listData.filter=name+this.selectedLocation;
          }
          else{
          this.listData.filter=name;
          }
         }

        onChangeLocation(location){
          this.selectedLocation=location;

         if(this.selectedName){
         this.listData.filter=location+this.selectedName;
         }
         else{
         this.listData.filter=location;
         }

【问题讨论】：

标签： angular-material mat-table

【解决方案1】：

这有点棘手，但希望我能让你走上正轨。默认过滤谓词的工作方式（简化）是它检查传递的数据对象（即行）的任何属性是否包含传递的过滤。

这对您不起作用，因此您覆盖了数据源的 filterPredicate。不过，这仍然不能完全解决您的问题 - 过滤器只接受字符串对象，最好您希望传递一个自定义的“过滤器对象”。要绕过它，您可以编写 DataSource 的自定义实现或序列化过滤器对象，然后将其作为过滤器传递，然后在 filterPredicate 中对其进行反序列化。

一个简单的实现将是（基于您的示例）：

  private filter: any = {};

  ngOnInit(): void {
    this.listData = new MatTableDataSource(res);
    this.listData.filterPredicate = (data, filter): boolean => {
      const filterObject = JSON.parse(filter);

      for (const filterProperty in filterObject) {
        if (!Object.prototype.hasOwnProperty.call(filterObject, filterProperty)) {
          continue;
        }

        const searchTerm: string = filterObject[filterProperty] ? filterObject[filterProperty].trim().toLowerCase() : '';
        const rowValue: string = data[filterProperty] ? data[filterProperty].trim().toLowerCase() : '';
        return rowValue.indexOf(searchTerm) > -1;
      }

      return true;
    };
  }

  onChangeName(name) {
    this.updateDataSourceFilter('name', name);
  }

  onChangeLocation(location) {
    this.updateDataSourceFilter('location', location);
  }


  private updateDataSourceFilter(propertyName: string, value: any): void {
    this.filter[propertyName] = value;

    this.listData.filter = JSON.stringify(this.filter);
  }

这是我的想法，所以它可能无法编译 - 但应该让您基本了解如何自己实现它。

【讨论】：