I've developed an application that can organize an array of objects in either ascending or descending order based on a specific property value using the custom function sortByField(). Additionally, the app allows users to filter data by entering a search query, displaying only matching records. The search query is handled by the haku pipe, while data pagination is managed by the sivutus pipe.
The issue in the code arises when the table contains pipes
| haku:postitoimipaikka | sivutus:sivusortByField() function to fail at sorting the data by field.
Removing the pipes from the table resolves the problem, allowing the sortByField() function to function correctly.
Here is an example of how it should work:
<tr *ngFor="let ottoautomaatti of ottoautomaatit">
And here is where the issue arises:
<tr *ngFor="let ottoautomaatti of ottoautomaatit | haku:postitoimipaikka | sivutus:sivu">
Within the sivu.component.html file, you'll find various components like search input fields, pagination buttons, and a sortable table.
sivu.component.ts contains the logic for handling data manipulation based on user interaction, such as sorting and navigating through pages.
The ottoautomaatit.service.ts file manages the data retrieval and storage for the application.
haku.pipe.ts and sivutus.pipe.ts are custom pipes used for filtering/searching and pagination, respectively.
The expected behavior of the application is to allow users to click on a table header to sort the data in ascending or descending order, while also being able to paginate through the data and use the search functionality.
However, the current implementation allows only one of these functionalities to work properly at a time:
- Search functionality and pagination
- Sorting functionality