How to filter with two drop down lists

Question

I have a small problem in my two filters.

If I select the value IN and ENCODE, all values are displayed, ok...

My problem is that if I click on OUT, the status isn't displayed correctly...

How can I solve this problem, please?

I share my code with you

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"
    );
  }
}

Thank you very much for your help.

Answer 1

Try applying all filters at once? this.customerTransfers is never modified, only this.filteredCustomer, which is overridden each time you select an option.

public selectedType: string;
public onChangeType(type: string) {
    this.selectedType = type;
    this.applyFilters();
}
    
public selectedStatut: string;
public onChangeStatut(statut: string) {
    this.selectedStatut = statut;
    this.applyFilters();
}

private applyFilters() {
   this.filteredCustomer =
       this.customerTransfers.filter(
           (item) =>
               (this.selectedStatut === "ALL"
               || item.statut == this.selectedStatut)
               && (this.selectedType === "ALL"
               || item.type == this.selectedType)
       );
}

Answer 2

You are passing the event as a whole in your onChange functions but reading the value directly.

Try passing the following:

1. (ngModelChange)="onChangeType($event.target.value)"
2. (ngModelChange)="onChangeStatut($event.target.value)"

Edit: You mentioned that status is an integer. But for the value of options, you seem to be passing it as string. It might help solve your issue if you changed this to int type

<option [value]="ALL">TOUS</option>
<option [value]="1">ENCODE</option>
<option [value]="8">ANNULE</option>
<option [value]="9">FAIT</option>

You can try parsing the string value before passing into your change function: (ngModelChange)="onChangeStatut(parseInt($event.target.value))"

Note: you'll have to add a check for 'ALL' as that can't be parsed to an integer