Question

我正在尝试根据下拉菜单中传递的数据来过滤表格。

我在下拉菜单中使用了reactForm：

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

我从后端调用“保证人”和“中间人”列表：

 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:['']
    });
    }

我的'Assureur'就像：（例如）

{
        "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' ">

希望获得帮助。

基于下拉列表的角度过滤表

1 个答案: