Предварительная фильтрация данных таблицы на нескольких экранах в одном столбце - PullRequest
0 голосов
/ 03 января 2019

По сути, у меня есть несколько представлений, которые отображают один и тот же компонент, который имеет таблицу данных. Однако существуют представления, такие как All, Clients и т. Д., А в представлении Clients необходимо выполнить фильтрацию в столбце reportCategory, и этот столбец только ДО загрузки страницы. Однако над таблицей уже есть фильтр, поэтому мне нужно применить фильтр до его загрузки в столбце категории, в то же время позволяя пользователю фильтровать уже отфильтрованную таблицу.

Я посмотрел на 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...