Question

基本上，我有多个视图来显示具有数据表的同一组件。但是，存在诸如All，Clients等的视图，并且在Clients视图上，需要在reportCategory列中进行过滤，并且该列仅在页面之前负载。但是，表上方已经有一个过滤器，因此我需要在将其加载到category列之前应用该过滤器，同时仍然允许用户过滤已经过滤的表。

我已经研究了filterPredicate，但似乎它将覆盖我已经设置的过滤器，这不好，因为我仍然想要该功能。我目前正在使用Angular 6和Angular Material。

HTML组件：

<!-- Filter Bar Here that filters across all columns -->

<table mat-table [dataSource]="dataSource" matSort>

  <ng-container matColumnDef="reportName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let report"> {{ report.reportName }} </td>
  </ng-container>

  <ng-container matColumnDef="reportType">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
    <td mat-cell *matCellDef="let report"> {{ report.reportType }} </td>
  </ng-container>

  <ng-container matColumnDef="reportCategory">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Category </th>
    <td mat-cell *matCellDef="let report"> {{ report.reportCategory }} </td>
  </ng-container>

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

</table>

TS组件（有一个路由参数指定了我要过滤的方式）：

/**
 * Sets the reports table.
 */
ngOnInit() {
  this.paramsSubscription = this.route.params
    .subscribe(
      (params: Params) => {
        this.filter = params['filter'];
      }
    );
  this.setReports(this.filter);
}

/**
 * Initializes the data source, paginator and sorter for reports table.
 */
setReports(filter: any) {
  this.dataSource = new MatTableDataSource(this.reportData);
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
  this.applyFilter(filter);
}

现在，此过滤器跨所有列进行过滤，这很麻烦，因为client可能位于reportName列中，但我只想过滤reportCategory。

一列在多个屏幕上预过滤表数据

0 个答案: