Angular中基於Dropdown的過濾表

Question

我正在嘗試根據從下拉列表中傳遞的數據過濾表。

我在下拉列表中使用了 reactiveForm：

<form novalidate [formGroup]="policeform">
  <p-dropdown [options]="Assureurs" optionLabel="nom"  formControlName="assureur"></p-dropdown>
  <p-dropdown [options]="Intermediares" optionLabel="nom"  formControlName="intermediare"></p-dropdown>

我從后端調用“Assureurs”和“Interemediares”列表：

 getAssureurs(){
      this.policeService.getAssureursList().subscribe(
        data => {
        this.Assureurs=data;
        },
       error =>
        console.log(error));
    }
    getIntermediares(){
      this.policeService.getIntermediaresList().subscribe(
        data => {
        this.Intermediares=data;
        },
       error =>
        console.log(error));
    }

    initPoliceForm(){
      this.policeform = this.fb.group({
        assureur:[''],
        intermediare:['']
    });
    }

我的“保證人”就像：（例如）

{
        "id":3,
        "nom": "Atla",
        "dateCreation":"2020-05-14T00:20:15.956+0000",
        "Actif":true
    }

這是我的過濾器：

@Pipe({
  name: 'tableFilter'
})
export class TableFilterPipe implements PipeTransform {

  transform(list: any[], formControls: Object) {
    const keys       = Object.keys(formControls).filter(key => formControls[key]);
    const filterUser = user => keys.every(key => {
      user[key].nom==formControls[key].nom;
     });
    return keys.length ? list.filter(filterUser) : list;
  }
}

但它沒有用，它沒有返回過濾后的數據！

這就是我使用過濾器的方式：

<tr  *ngFor="let police of polices |async| orderBy: 'id' | tableFilter: policeform.value ">

Answer 1

您可以在您的component.ts文件中添加：

filteredPolices : Police[] = [];
_listFilter = '';
get listFilter(): string {
      return this._listFilter;
}

set listFilter(value: string){
      this._listFilter = value;
      this.filteredPolices = this.listFilter ? this.performFilter(this.listFilter) : this.polices;
}

實現 performFilter 方法：

performFilter(filterBy: string): Police[]{
      // implement you filter and return the result
}

在您的 HTML 文件中添加[(ngModel)]="listFilter"到下拉列表

並遍歷您過濾的數據：

<tr *ngFor="let police of filteredPolices | orderBy: 'id' ">

希望這有幫助。