Angular 中的过滤表

Question

我有一个包含两个过滤选项“性别”和“国家”的表格！基本上过滤器有效，即我点击男性或女性的性别下拉列表，表格显示所有条目。我的问题是，按照我所做的方式，我总是必须刷新（如重新加载数据）表，然后才能再次过滤。假设我有女性过滤器，我不能直接点击男性显示男性条目，我必须刷新然后我只能再次过滤。我确定它只是一两行代码的问题，但我似乎无法弄清楚。

在我的方法下面：

filterByGender(event) {
    let gender = event;
    if (gender === "Male") {
      gender = "M";
    } else if (gender === "Female") {
      gender = "F";
    }
    let filteredGender = this.customerArray
      .filter(customer => customer.gender === gender);
    console.log("filteredGender", filteredGender);
    this.customerArray = filteredGender;

  }

  filterByCountry(event) {
    let country = event;
    let filteredCountry = this.customerArray
      .filter(customer => customer.countryCode === country);
    this.customerArray = filteredCountry;
  }

this.customerArray 是后端所有客户的数组。现在它没有按照我想要的方式工作的原因是因为我重新填充了数组所以我不能做第二个过滤器，但是有什么办法可以解决这个问题？

Answer 1

如果您想根据选择框上的选定值过滤表，您实际上可以使用 Angular Pipe

根据您的喜好创建了2 个 Stackblitz 演示：

表列表的单个过滤器管道 -仅按性别过滤

表格列表的多选过滤器管道 -按性别和国家过滤

表过滤管

在模块的声明中导入 TableFilterPipe

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

   transform(list: any[], value: string) {

      // If there's a value passed (male or female) it will filter the list otherwise it will return the original unfiltered list. 
      return value ? list.filter(item => item.gender === value) : list;

   }
}

自定义组件

@Component({
   ...,
   template: `
      <select [(ngModel)]="gender">
         <option value="male">Male</option>
         <option value="female">Male</option>
      </select>

      <table>
          ...
          <tr *ngFor="let user of users | tableFilter: gender">   // Use your pipe here, so whenever there's a change on selectbox, it will filter the list based on the value assigned. 
              <td>{{ user.name }}</td>
              <td>{{ user.gender }}</td>
          </tr>
      </table>

   `
})
export class CustomComponent {
   gender: string;

   users: any[] = [...];

}