如何使用两个下拉列表进行过滤

Question

我的两个过滤器有一个小问题。

如果我select值IN和ENCODE，所有值都显示出来，ok...

我的问题是，如果我点击 OUT，状态显示不正确...

请问如何解决这个问题？

我和你分享我的代码

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

非常感谢您的帮助。

Answer 1

您在 onChange 函数中将事件作为一个整体传递，但直接读取值。

尝试传递以下内容：

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

编辑：您提到状态是一个整数。但是对于选项的值，您似乎将其作为字符串传递。如果您将其更改为 int type

可能有助于解决您的问题

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

您可以尝试在传递到更改函数之前解析字符串值：(ngModelChange)="onChangeStatut(parseInt($event.target.value))"

注意：您必须添加对 'ALL' 的检查，因为它无法解析为整数

Answer 2

尝试一次应用所有过滤器？ this.customerTransfers 永远不会被修改，只有 this.filteredCustomer，每次您 select 一个选项时都会被覆盖。

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

如何使用两个下拉列表进行过滤

How to filter with two drop down lists

javascript

typescript

angular