问角度中的过滤表
EN

Stack Overflow用户

提问于 2018-12-05 23:44:49

回答 2查看 19.8K关注 0票数 1

我有一个表，有两个过滤选项“性别”和“国家”！从本质上说，过滤器起作用了，也就是我点击了男性或女性的性别下拉列表，表中显示了所有的条目。我的问题是，以我所做的方式，我总是必须刷新(就像重新加载数据一样)表，然后才能再次过滤。假设我有针对女性的过滤器，我不能直接点击男性来显示男性条目，我必须刷新，然后我只能再次过滤。我确信这只是一两行代码的问题，但我似乎就是弄不明白。

下面是我的方法：

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是后台所有客户的数组。现在它不能以我想要的方式工作的原因是因为我重新填充了数组，所以我不能做第二个过滤器，但是有什么方法可以解决这个问题呢？

angular

filter

人脸核身产品特惠

用户政务民生、金融、通信运营商等场景，接入全面，安全可靠新用户3折起

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-12-06 00:16:06

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

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

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;

   }
}

CustomComponent

@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[] = [...];

}

票数 5

Stack Overflow用户

发布于 2020-02-24 11:38:44

 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