按多个值过滤（Angular 2/7，TypeScript）答案

【问题标题】：Filter by multiple values (Angular 2/7, TypeScript)按多个值过滤（Angular 2/7，TypeScript）
【发布时间】：2019-05-17 19:56:31
【问题描述】：

我无法按多个值过滤“listProduct”。如何按多个值过滤？

我试过用逗号写，但没有用。我在“google”中没有找到解决方案。

searchFilter = () => {
    this.listProducts = this.listProductsOrigin.filter(e =>
      e.name.toLocaleLowerCase().includes(this.searchValue.toLocaleLowerCase())
    );

    this.loading = false;
    // tslint:disable-next-line: semicolon
  };

我试过了：

searchFilter = () => {
    this.listProducts = this.listProductsOrigin.filter(e =>
      e.name.toLocaleLowerCase().includes(this.searchValue.toLocaleLowerCase()),
e.description.toLocaleLowerCase().includes(this.searchValueDesc.toLocaleLowerCase())
    );

    this.loading = false;
    // tslint:disable-next-line: semicolon
  };

但不工作。

【问题讨论】：

两个条件之间需要||
像这样：searchFilter = () => { this.listProducts = this.listProductsOrigin.filter(e => e.name.toLocaleLowerCase().includes(this.searchValue.toLocaleLowerCase()) || e.description.toLocaleLowerCase().includes(this.searchValueDesc.toLocaleLowerCase()) ); this.loading = false; // tslint:disable-next-line: semicolon };

标签： angular typescript filter

【解决方案1】：

打字稿编译器应该会警告您尝试的解决方案。 filter() 方法接受一个返回布尔值的函数，所以你可能想要这样的东西：

this.listProducts = this.listProductsOrigin.filter(e =>
      e.name.toLocaleLowerCase().includes(this.searchValue.toLocaleLowerCase()) || e.description.toLocaleLowerCase().includes(this.searchValueDesc.toLocaleLowerCase())
    );

或者也许：

this.listProducts = this.listProductsOrigin.filter(e =>
      e.name.toLocaleLowerCase().includes(this.searchValue.toLocaleLowerCase()) && e.description.toLocaleLowerCase().includes(this.searchValueDesc.toLocaleLowerCase())
    );

取决于您是否要将过滤子句与 AND 或 OR 操作结合起来

【讨论】：

在第二个变体中查找是正确的，但空值不起作用
不是 100% 确定我在关注你，但当然，如果你尝试在 null 或 undefined 上调用 toLocaleLowerCase()，那么你会遇到错误。如果没有更多信息，将很难调试。例如，您可以事先过滤掉所有空白（假设它们将被排除而不是包含在内），但这确实是一个不同的问题......
如果值为空则输出所有结果

【解决方案2】：

试试：

searchFilter = () => {
    this.listProducts = this.listProductsOrigin.filter(e =>
      e.name.toLocaleLowerCase().includes(this.searchValue.toLocaleLowerCase()) 
      || e.description.toLocaleLowerCase().includes(this.searchValueDesc.toLocaleLowerCase())
    );
    this.loading = false;
    // tslint:disable-next-line: semicolon
};

【讨论】：

仅根据第一个条件进行良好搜索