По сути, у меня есть несколько представлений, которые отображают один и тот же компонент, который имеет таблицу данных. Однако существуют представления, такие как 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
.