Question

我有一个ngFor，它带有一个带有课程列表的Observable。此列表上方是一排复选框，当选中/取消选中它们时，它们会成功过滤列表。我试图添加一个输入框来搜索和过滤相同的列表。因为复选框是通过更新behaviour subject来工作的，而textFilter(searchString: string) { console.log(searchString) return this.courses .pipe(map((courses) => courses.filter( course => course.Name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1)) ); }可以使课程可见，所以我无法使过滤工作。我认为以下代码将过滤并返回可观察的课程，并且它将在模板中自动更新。但这没有效果。我整理了一个Stackblitz。如何同时选中复选框和搜索输入框来过滤列表？

list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                String clickedName = (list.getItemAtPosition(position).toString());
                Intent intent = new Intent(MainActivity.this, Profile.class);
                intent.putExtra("clickedName", clickedName);
                startActivity(intent);
                System.out.println(clickedName);
            }
        });

Answer 1

尝试这样：

Working Demo

  textFilter(searchString: string) {

    this.courses = this.courses
     .map(course => course.filter(item => item.name.toLowerCase().includes(searchString.toLowerCase())))
     };

  }

Answer 2

我建议使用反应形式而不使用textFilter（）方法。

使用反应形式（这是您的过滤器选项），您还有另一个可观察的this.form.valueChanges。

您可以将此Observable与您的课程Observable结合起来，如下所示：

this.filteredCourses$ = combineLatest([this.form.valueChanges, this.courses$]).pipe(
  map(([formValues, courses]) => doFilter(courses, formValues)),
);

带有搜索输入框和复选框的多过滤ngFor List

2 个答案: