Angular Form RxJS 在一个表单输入上进行多重过滤答案

【问题标题】：Angular Form RxJS multiple filter on one form inputAngular Form RxJS 在一个表单输入上进行多重过滤
【发布时间】：2021-04-14 00:32:58
【问题描述】：

我有以下要过滤的对象数组

companies = [
    {
      division: "Company 1",
      departments: ["Department 1", "Department 2", "Department 3"]
    },
    {
      division: "Company 2",
      departments: ["Department 2", "Department 3", "Department 4"]
    },
    {
      division: "Company 3",
      departments: ["Department 3", "Department 4", "Department 5"]
    }
    ...
  ]

我可以使用单个表单输入上的值更改订阅来过滤除法。

this.myForm.valueChanges.pipe(
    debounceTime(400),
    distinctUntilChanged(),
    tap(val => {
      let searchTerm = val.searchString;
      this.filteredDivisions = this.companies.filter((company) =>
        company.division
          .toLowerCase()
          .indexOf(searchTerm.toLowerCase()) !== -1)

    })
  ).subscribe()

我被要求根据一个输入过滤部门和部门数组。因此，如果用户键入Department 1，则只会显示公司 1，但用户也可以在同一输入框中键入Company 1，然后也只会显示公司 1。用户应该能够输入部门或部门来过滤数组。

那么如何设置过滤器来同时过滤部门和部门，使用相同的输入？

【问题讨论】：

标签： angular rxjs angular-forms

【解决方案1】：

好吧，您只需要稍微扩大将与给定字符串匹配的字段

this.myForm.valueChanges
    .pipe(
        debounceTime(400),
        distinctUntilChanged(),
        tap(val => {
            let searchTerm = val.searchString.toLowerCase();
            this.filteredDivisions = this.companies.filter(company => {
                // filter against the 'division' property
                const divisionMatch =
                    company.division.toLowerCase().indexOf(searchTerm) !== -1;

                // filter against the 'departments' property
                const departmentsMatch = () =>
                    company.departments.find(
                        department => department.toLowerCase().indexOf(searchTerm) !== -1,
                    );

                // If divisionMatch is true, no need to check further, return true
                return divisionMatch || departmentsMatch();
            });
        }),
    )
    .subscribe()

我将您的注意力集中在 departmentsMatch 是一个函数而不是一个简单的值这一事实上，这允许惰性求值。如果division 匹配，则永远不会调用departmentsMatch。

【讨论】：

太棒了，谢谢！