Introduction
I am currently working on implementing a feature in my Angular application where the column filter continuously updates the results based on the selected filters. The issue I'm facing is that when I select a filter in one column, it correctly filters the data but as soon as I select a different column filter, it adds back all the previously filtered items along with the new ones.
This problem persists as I continue to select different filters for columns like Name, Project, and Project Activity. It ends up cluttering the filtered data with incorrect items.
I am struggling to figure out how to prevent these wrong items from being added to the filtered columns.
Code
Within my HTML code, there are 5 columns:
<mat-table #table [dataSource]="dataSource" matSort matSortActive="work_date" matSortDirection="asc">
<ng-container matColumnDef="create_by">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
<mat-cell *matCellDef="let log"> {{ log.create_by }} </mat-cell>
</ng-container>
<ng-container matColumnDef="project_id">
<mat-header-cell ng-repeat="data in filtered = (list | filter: search)" *matHeaderCellDef
mat-sort-header>
Project ID </mat-header-cell>
<mat-cell *matCellDef="let log"> {{ getSecondArrayItem(log.project_id)?.name }} </mat-cell>
</ng-container>
.....
</mat-table>
The filtering logic is housed in the component's filterChange method, specifically in createFilter which handles the filtering of columns.
filterChange(filter, event) {
// Filter change logic here
}
createFilter() {
// Create filter function logic here
}
The connection between the application and the database is functioning correctly, allowing for filtering of one column at a time.