我试图用一个表单的四个字段过滤一个对象array.这四个字段都是可组合的.

这四个字段是: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 = [];
        }
      }
    }
  }

据我所知,它可以正确地与文本框(描述和文件名)的过滤器一起工作,您可以 Select 一个框,或者将它们组合起来,很好地进行过滤.

但我不知道如何合并多个 Select 过滤器(类型和公司),下面我将举一个例子,说明如果我 Select 了搜索所需的所有过滤器,我将获得的对象:

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()有点不可靠,所以我go 掉了它,改为调用every().

Typescript相关问答推荐

如果存在一处房产,请确保存在其他房产

类型缩小对(几乎)受歧视的unions 不起作用

类型是工作.但它失go 了正确变体的亮点..为什么?或者如何增强?

有没有办法解决相互影响的路由之间的合并?

使某些(嵌套)属性成为可选属性

向NextAuth会话添加除名称、图像和ID之外的更多详细信息

在TypeScrip的数组中判断模式类型

在Typescript 中,有没有`index=unfined的速记?未定义:某个数组[索引]`?

在列表的指令中使用intersectionObservable隐藏按钮

如何以Angular 导入其他组件S配置文件

我在Angular 17中的environment.ts文件中得到了一个属性端点错误

缩小对象具有某一类型的任意字段的范围

错误:NG02200:找不到类型为';对象';的其他支持对象';[对象对象]';.例如数组

创建一个TypeScrip对象并基于来自输入对象的约束定义其类型

为什么TS2339;TS2339;TS2339:类型A上不存在属性a?

Typescript,如何在通过属性存在过滤后重新分配类型?

TypeScript:方法获胜';t接受较窄类型作为参数

使用NextJS中间件重定向,特定页面除外

有没有一种简单的方法可以访问Keyboard Shortcuts JSON文件中列出的每个命令的显示名称(标题)?

如何通过nx找到所有受影响的项目?