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

 transform(items: Incident[], location_id: string, driver_id: string,
    description: string, type: string,technician_id: string){
    if (items && items.length){
        return items.filter(item =>{
            if (location_id && item.location_id.name.toLowerCase().indexOf(location_id.toLowerCase()) === -1){
                return false;
            }
            if (driver_id && item.driver_id.name.toLowerCase().indexOf(driver_id.toLowerCase()) === -1){
                return false;
            }
            if (description && item.description.toLowerCase().indexOf(description.toLowerCase()) === -1){
              return false;
            }
            if (type && item.incidenttype_id.name.toLowerCase().indexOf(type.toLowerCase()) === -1){
              return false;
            }
            if (technician_id && item.technician_id.name.toLowerCase().indexOf(technician_id.toLowerCase()) === -1){
                return false;
            }

            return true;
       })
    }
    else{
        return items;
    }
}

    enter code here

Answer 2

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

根据您的喜好创建 2 Stackblitz Demo：

Single Filter Pipe for Table List - 仅按性别过滤

Multiple Selection Filter Pipe for Table List - 按性别和国家/地区过滤

TableFilterPipe

在您的模块声明

上导入 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[] = [...];

}