Question

我正在尝试向材质表添加不同的过滤器。更准确地说，我正在尝试重现类似于以下GIF的内容

image description

为此，我在下面的Github thread中关注了irowbin的回答，但根据他的指导方针，我并不能真正产生想要的东西

在Stackblitz或Github上是否有任何可行的示例，因此我可以关注并在mattable中创建多个搜索过滤器？

Answer 1

这是基于其他材料成分的角材料表工具列过滤器的示例

单列的列过滤器结构

<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指令用于防止在点击事件中隐藏Mat-menu

条件列表和功能

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

Answer 2

您可以使用mat-table-filter进行过滤。它是受hibernate的示例api启发的。您可以轻松完成列过滤。它使您免于实现包括去抖动等在内的过滤样板。它也支持数组过滤。

您唯一需要做的就是向材料表中添加def select_col(X, cols=None): return X[cols] ct1 = compose.make_column_transformer( (p.OneHotEncoder(), p.FunctionTransformer(select_col, kw_args=dict(cols=['a', 'b']))), remainder='passthrough' ) ct1.fit(df)指令，并将matTableFilter绑定到数据源中作为项目的表示形式。

exampleEntity

仅此而已。当您填充exampleObject的属性时，在默认的防反跳支持下，过滤器将自动正常运行。您还可以更改反跳时间。

您可以在此处查看示例：https://halittalha.github.io/ng-material-extensions/

我在下面共享完整的数组过滤源代码。 下面的示例利用芯片组件收集数组内容进行过滤。

.html

 <table mat-table matTableFilter [dataSource]="dataSource"
 [exampleEntity]="exampleObject"...>

.ts

<mat-table matTableFilter [exampleEntity]="filterEntity" [filterType]="filterType" [dataSource]="dataSource"
  class="mat-elevation-z8">
  <ng-container matColumnDef="category">
    <mat-header-cell *matHeaderCellDef>
      <mat-form-field appearance="outline">
        <input matInput placeholder="Category" [(ngModel)]="filterEntity.category">
      </mat-form-field>
    </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.category}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="brand">
    <mat-header-cell *matHeaderCellDef>
      <mat-form-field appearance="outline">
        <input matInput placeholder="Product Brand" [(ngModel)]="filterEntity.brand">
      </mat-form-field>
    </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.brand}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="availableSizes">
    <mat-header-cell *matHeaderCellDef>

      <mat-form-field class="example-chip-list">
        <mat-chip-list #chipList aria-label="Fruit selection">
          <mat-chip *ngFor="let size of filterEntity.availableSizes" [selectable]="true" [removable]="true"
            (removed)="remove(size)">
            {{size}}
            <mat-icon matChipRemove>cancel</mat-icon>
          </mat-chip>
          <input placeholder="Add Size" [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
            (matChipInputTokenEnd)="add($event)">
        </mat-chip-list>
      </mat-form-field>
    </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.availableSizes}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

过滤物料表中的不同列

2 个答案: