Angular 离子3多级搜索过滤器

我想实现多级数组的搜索功能。我已将以下数据绑定到此项。（请参阅图）。然后我使用下面的TS代码进行过滤。它可以过滤

类别

级别，但不能过滤到

产品

级别

如何过滤

products

数组中的

code

？如果可能的话，

desc

和

uom

也是如此。例如，在图像中，您会看到7个项目，如果搜索中不存在所有7个项目，则不会显示整个类别。如果存在一个或多个移动项目，则将显示该项目

HTML

TS文件

filterItems(param: any): void {
    let val: string = param;

    if (val) {
      if (val.trim() !== '') {
        this.filterItemsList = this.items.filter((data) => {
          console.log(data.category);
          return data.category.toLowerCase().indexOf(val.toLowerCase()) > -1;
        })
      }
    }
}

图像

---

正如我在回答中指出的，您可以将不同的条件与逻辑OR运算符组合在一起。使用此选项和，您可以尝试以下操作：

filterItems(param: any): void {
    let val: string = param;

    if (val) {
      if (val.trim() !== '') {
        this.filterItemsList = this.items.filter((data) => {
          console.log(data.category);
          return data.category.toLowerCase().indexOf(val.toLowerCase()) > -1
            || data.products.some(product => product.code.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
      }
    }
  }

---

这是怎么回事

some（）

方法测试数组中是否至少有一个元素通过了所提供函数实现的测试

因此，我们可以轻松测试您的任何产品是否有包含搜索值的代码。您也可以对其他属性执行此操作，将它们与逻辑OR（

|

）连接起来，如for

desc

等：

return data.category.toLowerCase().indexOf(val.toLowerCase()) > -1
        || data.products.some(product => product.code.toLowerCase().indexOf(val.toLowerCase()) > -1)
        || data.products.some(product => product.desc.toLowerCase().indexOf(val.toLowerCase()) > -1);

---

是的，我以前看过你关于另一个话题的答案，但它只过滤了1级。矿山需要2级，例如

产品->产品.code

。谢谢你的帮助