I am encountering a small issue with my two filters.
When I choose the values IN and ENCODE, all the values are displayed correctly...
https://i.sstatic.net/Uoido.png
However, the problem arises when I click on OUT, as the status is not displayed correctly...
https://i.sstatic.net/SoaYG.png
Could you please provide some guidance on how to resolve this issue?
Below is the code that I am working with:
HTML - ANGULAR
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="type" class="form-label">Type</label>
</div>
<div class="col-4">
<select
class="form-select"
style="max-width: 100px"
[ngModel]="selectedType"
(ngModelChange)="onChangeType($event)"
>
<option [value]="'ALL'">TOUS</option>
<option [value]="'IN'">IN</option>
<option [value]="'OUT'">OUT</option>
</select>
</div>
</div>
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="type" class="form-label">Status</label>
</div>
<div class="col-4">
<select
class="form-select"
style="max-width: 100px"
[ngModel]="selectedStatut"
(ngModelChange)="onChangeStatut($event)"
>
<option [value]="'ALL'">TOUS</option>
<option [value]="'1'">ENCODE</option>
<option [value]="'8'">ANNULE</option>
<option [value]="'9'">FAIT</option>
</select>
</div>
</div>
TS
export class CustomerTransfertComponent implements OnInit, OnDestroy {
private unsubscribe$ = new Subject<void>();
customerTransferts: CustomerTransfert[] = [];
filteredCustomer: CustomerTransfert[] = [];
constructor(
private service: CustomerTransfertService,
private modalService: BsModalService
) {}
ngOnInit(): void {
this.getCustomerTransfert();
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
/* Display datas for the HTML table */
private getCustomerTransfert(): void {
this.service
.getCustomerTransfert()
.pipe(takeUntil(this.unsubscribe$))
.subscribe((res) => {
this.customerTransferts = res.PREA.map((val) => {
return {
cler: val.CLER,
num: val.NUM,
ref_rbc: val.REF_RBC,
type: val.TYPE,
quantite: val.QUANTITE,
isin: val.ISIN,
trade_date: val.TRADE_DATE,
reception_date: val.RECEPTION_DATE,
statut: val.STATUT,
label: val.LABEL,
svm: val.SVM,
coursMoyenAchat: val.COURS_MOYEN_ACHAT,
personneContact: val.PERSONNE_CONTACT,
tel: val.TEL,
fax: val.FAX,
date: val.DATE,
traitementDate: val.TRAITEMENT_DATE,
annulationDate: val.ANNULATION_DATE,
intitule1: val.INTITULE1,
contrepartie: val.CONTREPARTIE,
tis: val.TIS,
statut_lib: val.STATUT_LIB,
changement_benef_eco: val.CHANGEMENT_BENEF_ECO,
};
});
this.filteredCustomer = this.customerTransferts;
});
}
public selectedType: any;
public onChangeType(type: any) {
this.selectedType = type;
this.filteredCustomer = this.customerTransferts.filter(
(item) => item.type === this.selectedType || this.selectedType === "ALL"
);
}
public selectedStatut: any;
public onChangeStatut(statut: number) {
this.selectedStatut = statut;
this.filteredCustomer = this.customerTransferts.filter(
(item) =>
item.statut === +this.selectedStatut || this.selectedStatut === "ALL"
);
}
}
Any help or advice you can provide on this matter would be greatly appreciated.