时间戳

首页 > 解决方案 > Angular Form RxJS 在一个表单输入上进行多重过滤

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

问题描述

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

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。用户应该能够键入部门或部门来过滤数组。

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

标签： angularrxjsangular-forms

解决方案

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

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永远不会调用。

推荐阅读