Check out this HTML table containing an input field that filters plans.
https://i.stack.imgur.com/UfIw2.png
I input the value => 1
The filter successfully works
https://i.stack.imgur.com/CsQXh.png
Removing the value (1) displays all recordings, totaling to 4 recordings
https://i.stack.imgur.com/dXaIe.png
I try entering the value 4
https://i.stack.imgur.com/hmQWi.png
After deleting the value 4, I notice there are only 2 recordings ????
https://i.stack.imgur.com/1Hvv0.png
I am puzzled by this issue?
todo.component.ts
filterByPlan() {
if (this.planFilter) {
this.tarificationTitre = this.todoService.PLN_PLC.filter((item) => {
return item.PLN_SVM.some((svm) => {
return svm.PLN.some(
(plan) => plan.PLAN === parseInt(this.planFilter)
);
});
}).map((item) => {
item.PLN_SVM = item.PLN_SVM.filter((svm) => {
return svm.PLN.some(
(plan) => plan.PLAN === parseInt(this.planFilter)
);
});
return item;
});
} else {
this.tarificationTitre = this.todoService.PLN_PLC;
}
}
todo.service.ts
export class TodoService {
PLN_PLC = [
// The detailed data for different plans from various places
];
constructor() {}
}
The filtering operation is based on the variable PLAN
If you have any insights or ideas, please share as I am eager to understand and resolve the issue. Also, check out the illustration in action on Stackblitz.