angular – 过滤材料表中的不同列

单柱柱过滤器的结构

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef>
    <div class="header">
      No.
      <button mat-button class="btn-toggle" [matMenuTriggerFor]="menu">
        <mat-icon>keyboard_arrow_down</mat-icon>
      </button>

    </div>
    <mat-menu #menu>
      <div mat-menu-item mat-filter-item [disableRipple]="true" class="menu-title">
        No.
      </div>
      <div mat-menu-item mat-filter-item [disableRipple]="true">
        <mat-form-field>
          <mat-select [panelClass]="'mat-elevation-z10'" placeholder='Conditions' [(value)]="searchCondition.position">
            <mat-option *ngFor="let  condition of conditionsList" [value]="condition.value">{{condition.label}}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div mat-menu-item mat-filter-item [disableRipple]="true">
        <mat-form-field>
          <input matInput placeholder="Value" [(ngModel)]="searchValue.position">
        </mat-form-field>
      </div>

      <div mat-menu-item mat-filter-item [disableRipple]="true">
        <button mat-raised-button (click)="clearColumn('position')">Clear</button>
        <button mat-raised-button color="primary" (click)="applyFilter()">Search</button>

      </div>
    </mat-menu>

  </th>
  <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

mat-filter-item指令用于防止在click事件上隐藏mat菜单

条件清单和功能

export const CONDITIONS_LIST = [
  { value: "nono",label: "Nono" },{ value: "is-empty",label: "Is empty" },{ value: "is-not-empty",label: "Is not empty" },{ value: "is-equal",label: "Is equal" },{ value: "is-not-equal",label: "Is not equal" }
];

export const CONDITIONS_FUNCTIONS = { // search method base on conditions list value
  "is-empty": function (value,filterdValue) {
    return value === "";
  },"is-not-empty": function (value,filterdValue) {
    return value !== "";
  },"is-equal": function (value,filterdValue) {
    return value == filterdValue;
  },"is-not-equal": function (value,filterdValue) {
    return value != filterdValue;
  }
};

零件

public displayedColumns: string[] = ["position","name","weight","symbol"];
  public dataSource = new MatTableDataSource(ELEMENT_DATA);

  public conditionsList = CONDITIONS_LIST;
  public searchValue: any = {};
  public searchCondition: any = {};
  private _filterMethods = CONDITIONS_FUNCTIONS;

  constructor() { }

  ngOnInit() {
    this.dataSource.filterPredicate = (p: PeriodicElement,filtre: any) => {
      let result = true;
      let keys = Object.keys(p); // keys of the object data 

      for (const key of keys) {
        let searchCondition = filtre.conditions[key]; // get search filter method

        if (searchCondition && searchCondition !== 'none') {
          if (filtre.methods[searchCondition](p[key],filtre.values[key]) === false) { // invoke search filter 
            result = false // if one of the filters method not succeed the row will be remove from the filter result 
            break;
          }
        }
      }

      return result
    };
  }

  applyFilter() {

    let searchFilter: any = {
      values: this.searchValue,conditions: this.searchCondition,methods: this._filterMethods
    }

    this.dataSource.filter = searchFilter;
  }

  clearColumn(columnKey: string): void {
    this.searchValue[columnKey] = null;
    this.searchCondition[columnKey] = 'none';
    this.applyFilter();
  }

source/github pages preview