Angular - 使用多个下拉列表过滤对象数组

埃莱德拉多尔

我正在尝试使用表单的四个字段过滤对象数组。所有四个字段都是可组合的。

这四个字段是:2 个带有多项选择的下拉菜单和 2 个文本框。

当我单击一个按钮时,我必须根据所选字段过滤数据。这是我单击搜索按钮时调用的方法:

filterData(form: NgForm) {
    if (this.gridValueClone) {
      const filterType = form.value.selectedItemsType;
      const filterCompany = form.value.selectedItemsCompany;
      const filterDescription = form.value.description;
      const filterNameFile = form.value.nameFile;
      if (filterType.length > 0 || filterCompany.length > 0 || filterDescription || filterNameFile) {
        let search;
        let arrFilter = [];
        if (filterType.length > 0) {
          arrFilter.push({
            "field": "type",
            "value": filterType
          });
        }
        if (filterCompany.length > 0) {
          arrFilter.push({
            "field": "company",
            "value": filterCompany
          });
        }       
        if (filterDescription) {
          arrFilter.push({
            "field": "description",
            "value": filterDescription
          });
        }
        if (filterNameFile) {
          arrFilter.push({
            "field": "name",
            "value": filterNameFile
          });
        }
        const results = this.gridValueClone.filter(data=> {
          arrFilter.forEach(filter => {
              search = data[filter.field] === filter.value;
          });
          return search;
        });
        if (results) {
          this.reportsGridValue = results;
        } else {
          this.reportsGridValue = [];
        }
      }
    }
  }

正如我所拥有的,它可以与文本框(描述和文件名)的过滤器一起正常工作,您可以选择一个框或将它们组合并很好地过滤。

但是我不知道如何合并多个选择过滤器(类型和公司),下面我将举例说明如果我选择了应该进行搜索的所有过滤器时获得的对象:

arrFilter = [
   {
      "field":"type",
      "value":[
         "Type1",
         "Type2",
         "Type3",
         "Type4"
      ]
   },
   {
      "field":"company",
      "value":[
         "CompanyA",
         "CompanyB"
      ]
   },
   {
      "field":"description",
      "value":"Prueba"
   },
   {
      "field":"name",
      "value":"Prueba.txt"
   }
]

有什么建议吗?谢谢你。

罗比·科内利森

只需根据是否filter.value为数组调用正确的逻辑。

这应该有效:

const results = this.gridValueClone.filter(data => 
    arrFilter.every(filter =>
        Array.isArray(filter.value)
            ? filter.value.includes(data[filter.field])
            : filter.value === data[filter.field]
    )
);

forEach()在过滤器回调中的使用有点不稳定,所以我摆脱了它并用对every().

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用angular by下拉列表过滤json数据

使用管道Angular 2过滤对象数组

如何使用Angular 2使用选择下拉列表过滤数据?

使用angular从选项的下拉列表中过滤/搜索

如何使用 Angular 6 中的下拉列表过滤 json 数据?

Angular Reactiveforms下拉列表(多个)

Angular 8 对象数组上的多个过滤器

通过 Angular 2 中的子数组过滤对象列表

基于多选下拉列表过滤对象列表 Javascript/Typescript/Lodash/Angular

使用模型[Angular]的嵌套对象填充选择下拉列表

通过 Angular 中的下拉列表过滤

使用AngularJS使用对象数组填充和过滤下拉列表

使用对象数组填充并使用jQuery过滤级联下拉列表

Angular:使用mat-select-filter并在过滤器字段中添加图标的搜索功能的多个mat-select下拉列表

如何提取用户通过Angular中的mat-options(下拉列表)选择的对象的多个属性?

我应该如何从Angular-2的下拉列表中将数组与多个选择选项绑定

Angular FormGroup FormArray-从下拉列表中仅提交数组中的一个对象

Angular2使用管道根据对象数组过滤对象数组

如何在Angular中使用p下拉列表过滤p-orderList

Angular-过滤ngFor对象的数据数组

对象数组过滤 angular2

Angular 5-多个管道过滤器在对象数组中不起作用

使用 2 参数过滤器(Angular)从对象中删除多个对象

使用填充数组动态创建的下拉列表不会使用angular更新

按下拉列表和Angular文本框过滤

使用RegExp用管道对对象进行Angular2过滤的对象数组?

如何使用angular6根据字符串数组过滤对象数组

Angular js使用JSON填充下拉列表

Angular,使用聚合结果填充下拉列表