ngx-数据表单列过滤器

Question

单独过滤不适用于 Swimlanes ngx-datatable。那里没有太多的解决方案。我一直致力于通过复选框过滤该列。如果单击该复选框，则匹配的属性保持可见，而所有其他属性则从视图中隐藏。

我遇到的问题是，当我选择多个复选框（多个）时，不会出现任何结果，我的过滤器只能找到我认为的单个匹配项，并且选中两个复选框并不满足过滤器的要求。

例如如果我选择“女性”，女性就会被过滤掉。然后，如果我选择“男性”，所需的结果是“女性”和“男性”都应该显示。

演示 - https://codesandbox.io/s/swimlane-filter-table-kjiyl

import { Component, ViewChild, TemplateRef } from "@angular/core";

@Component({
  selector: "filter-demo",
  template: `
    <div>
      <h3>
        Client-side Search and Filtering
      </h3>

      <ngx-datatable
        #table
        class="material"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="100"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [limit]="10"
        [rows]="rows"
      >
      </ngx-datatable>

      <ng-template #hdrTpl let-column="column" let-sort="sortFn">
        <div (click)="sort()">{{ column.name }}</div>
        <div>
          <label class="small m-0 datatable-checkbox">
            <input
              type="checkbox"
              [(ngModel)]="isFilterFemale"
              (change)="doFilter()"
              [ngModelOptions]="{ standalone: true }"
            />
            Female
          </label>
        </div>
        <div>
          <label class="small m-0 datatable-checkbox">
            <input
              type="checkbox"
              [(ngModel)]="isFilterMale"
              (change)="doFilter()"
              [ngModelOptions]="{ standalone: true }"
            />
            Male
          </label>
        </div>
      </ng-template>
    </div>
  `
})
export class FilterBarComponent {
  // @ViewChild(DatatableComponent, { static: false }) table: DatatableComponent;
  @ViewChild("hdrTpl", { static: true }) hdrTpl: TemplateRef<any>;

  rows = [];

  temp = [];

  columns = [];
  isFilterFemale = false;
  isFilterMale = false;
  constructor() {
    this.fetch(data => {
      // cache our list
      this.temp = [...data];

      // push our inital complete list
      this.rows = data;
    });
  }
  ngOnInit() {
    this.columns = [
      { name: "name", prop: "name", headerTemplate: this.hdrTpl }
    ];
    this.doFilter();
  }
  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open("GET", "assets/data.json");

    req.onload = () => {
      cb(JSON.parse(req.response));
    };

    req.send();
  }

  private doFilter() {
    this.rows = this.temp
      .filter(x => this.femaleFilter(x.classification.code))
      .filter(x => this.maleFilter(x.classification.code));
  }

  private femaleFilter(classificationCode) {
    if (!this.isFilterFemale) {
      return true;
    } else {
      if (classificationCode === "FMALE") {
        return true;
      } else {
        return false;
      }
    }
  }

  private maleFilter(classificationCode) {
    if (!this.isFilterMale) {
      return true;
    } else {
      if (classificationCode === "MALE") {
        return true;
      } else {
        return false;
      }
    }
  }
}

Answer 1

问题是您依次应用两个过滤器，因此只有通过第一个过滤器的结果才能进入第二个过滤器。 要让男性和女性都尝试调整您的 doFilter 函数，如下所示：

private doFilter() {
  this.rows = this.temp
    .filter(x => this.femaleFilter(x.classification.code) ||
      this.maleFilter(x.classification.code))
}