1

我正在用材料实现一个通用表。

问题是，我怎样才能创建一个过滤器方法，它只过滤他自己的列。

代码看起来像这样：

<ng-container *ngIf="dataSource">
  <table
    mat-table
    [dataSource]="dataSource"
    class="mat-elevation-z8"
    class="generic-table"
  >
    <ng-container *ngFor="let colName of displayedColumns">
      <ng-container matColumnDef="{{ colName }}">
        <th mat-header-cell *matHeaderCellDef class="{{ headerClasses }}">
          <ng-container *ngIf="!isFilterAvailable">
            {{ colName }}
          </ng-container>
          <ng-container *ngIf="isFilterAvailable">
            <mat-form-field class="filter" floatLabel="never">
              <mat-label>Search</mat-label>
              <input matInput (keyup)="doFilter($event.target.value, colName)" />
            </mat-form-field>
          </ng-container>
        </th>
        <td
          mat-cell
          *matCellDef="let cellData"
          class="{{
            cellData[colName]
              | customPipeChecks: colName:cellData:customCssFunction
          }}"
          innerHtml="{{
            cellData[colName]
              | customPipeChecks: colName:cellData:customValueFunction
          }} "
        ></td>
      </ng-container>
    </ng-container>

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

和 ts。文件如下所示：

import { filter } from "rxjs/operators";
import { GenericTableData } from "@app/models/generic-table-data.model";
import { Component, Input, OnInit } from "@angular/core";
import * as _ from "underscore";
import { DataSource } from "@angular/cdk/table";
import { MatTableDataSource } from "@angular/material";
import { FormControl } from "@angular/forms";

@Component({
  selector: "app-generic-table",
  templateUrl: "./generic-table.component.html",
  styleUrls: ["./generic-table.component.scss"]
})
export class GenericTableComponent implements OnInit {
  @Input() isFilterAvailable: Boolean;
  @Input() tableData: GenericTableData;
  @Input() displayedColumns: string[];
  @Input() headerClasses = "";
  @Input() customValueFunction: (
    elemValue: string,
    elemKey: string,
    elem: {}
  ) => string;
  @Input() customCssFunction: (
    elemValue: string,
    elemKey: string,
    elem: {}
  ) => string;
  dataSource = new MatTableDataSource();
  filters = {};
  constructor() {}

  ngOnInit() {
    if (
      !this.displayedColumns &&
      this.tableData.rows.length > 0 &&
      !this.isFilterAvailable
    ) {
      this.displayedColumns = _.keys(_.first(this.tableData.rows));
    } else {
      this.dataSource.data = this.tableData.rows;
      this.initFilterValues(_.keys(_.first(this.tableData.rows)));
      this.dataSource.filterPredicate = this.createFilter();
    }
    this.dataSource.data = this.tableData.rows;
  }

  initFilterValues(values) {
    values.forEach(key => {
      this.filters[key] = "";
    });
  }

  doFilter(filterValue: string, column: string) {
    this.filters[column] = filterValue.trim().toLocaleLowerCase();
    this.dataSource.filter = JSON.stringify(filter);
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  createFilter(): (data: any, filter: string) => boolean {
    let filterFunction = function(data, filter): boolean {
      console.log("Function excuted");
      let searchTerms = JSON.parse(filter);

      data.forEach(function(key, value) {});
      return (
       true;
    };
    return filterFunction;
  }
}

我已经找到了定义列的过滤器的解决方案，但表无法运行方法 createFilter()。

我已经调试过了。问题是函数 createFilter 只会运行一次，如果我在过滤器中提示某些内容，函数 createFilter() 将不会运行。

如果我在搜索输入字段中提示某些内容并在函数 filterFunction 中设置断点，则不会发生任何事情。

在网上我找到了这个例子：

https://stackblitz.com/edit/angular-hbakxo-xctfqy?file=app%2Ftable-filtering-example.ts

在此示例中，它也使用了相同的方法。

有人可以告诉我，我做错了什么。

此致，

狮子座

4

0 回答 0