不同级别的多个字段的过滤管道（嵌套数组）答案

【问题标题】：Filter pipe for multiple fields on different levels (nested array)不同级别的多个字段的过滤管道（嵌套数组）
【发布时间】：2019-12-02 20:46:42
【问题描述】：

我正在尝试按职位类型、职位标签（嵌套数组）和职位付款来过滤职位列表。我有一个复选框列表，其中包含工作类型和工作标签以及两个包含最低付款和最高付款的输入

目前，我只能过滤具有多个复选框值的工作类型，但我无法过滤工作标签，也不能过滤付款

我在这里尝试了这个解决方案： Filtering array of objects with arrays based on nested value

没用

我的工作对象：

{
    "jobTitle" :"Whatever",
    "jobDescription" : "",
    "jobType" : "EXTRA", // Job Type can be either EXTRA or FULL
    "jobPayement" : 5,   
    "tags" : ["RESTAURANT","EVENT"], //Job Tags are defined with 4 categories RESTAURANT / EVENT / COFFEE / HOTEL
    "xpOnly" : true,
    "image" : "kitchen.png",
   }

我的过滤器项目（复选框）：

this.filterItems = [
      {
        value: 'Coffee',
        checked: false
      },
      {
        value: 'Event',
        checked: false
      },
      {
        value: 'Hotel',
        checked: false
      },
      {
        value: 'Restaurant',
        checked: false
      },
      {
        value: 'FULL',
        checked: false
      },
      {
        value: 'EXTRA',
        checked: false
      },
    ];

过滤条件和ng for

 <a *ngFor="let job of jobs  | fresh: { jobType: ''} : checked();let i = index">

我的过滤管：

@Pipe({
  name: 'fresh'
})
export class FreshPipe implements PipeTransform {


  transform(items: any, filter: any, filterItems: Array<any>, isAnd: boolean): any {
    console.log('Filtering ..');
    if (filter && Array.isArray(items) && filterItems) {
      let filterKeys = Object.keys(filter);
      let checkedItems = filterItems.filter(item => { return item.checked; });
      if (!checkedItems || checkedItems.length === 0) { return items; }
      if (isAnd) {
        return items.filter(item =>
            filterKeys.reduce((acc1, keyName) =>
                (acc1 && checkedItems.reduce((acc2, checkedItem) => acc2 && new RegExp(item[keyName], 'gi').test(checkedItem.value) || checkedItem.value === "", true))
              , true)
              );
      } else {
        return items.filter(item => {
          return filterKeys.some((keyName) => {
            return checkedItems.some((checkedItem) => {
              return new RegExp(item[keyName], 'gi').test(checkedItem.value) || checkedItem.value === "";
            });
          });
        });
      } 
    } else {
      return items;
    }
  }


}

checked() {
    return this.filterItems.filter(item => { return item.checked; });
  }

就像我说的，现在我只有工作类型的过滤器，如果我们能找到过滤标签和付款的解决方案，那就太好了。我可以提供任何额外的信息感谢您的帮助。

【问题讨论】：

值得一读：angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe 所以首先，我建议在你的组件 ts 中执行逻辑。
这是我第一次使用Pipe，我只是跟着一个教程。我会读一读以了解逻辑。谢谢

标签： arrays angular filter pipe

【解决方案1】：

一般来说，使用管道过滤选项是个坏主意。看看有两个变量的可能性，“jobs”和“filteredJobs”。

通过filterItems过滤，它只是创建一个带有标签的数组并使用“some”。

    //create the array with the tags, e.g. ["Event","Restaurant"]
    const filter=this.filterItems.filter(x=>x.checked).map(x=>x.value);

    //use "some"
    this.filteredJobs=this.jobs.filter(job=>
        job.tags.some(t=>filter.indexOf(t)>=0)
    )

【讨论】：