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

Question

我有一个ngFor，它需要一个带有课程列表的可观察量。此列表上方是一排复选框，这些复选框在选中/取消选中时成功过滤列表。我正在尝试添加一个输入框来搜索和过滤相同的列表。由于复选框通过更新提供可观察课程的behaviour subject来工作，因此我无法使过滤起作用。我认为下面的代码会过滤并返回可观察的课程，它会在模板中自动更新。但它没有效果。我已经拼凑了一个堆栈闪电战。如何使用复选框和搜索输入框过滤列表？

textFilter(searchString: string) {
console.log(searchString)
return this.courses
.pipe(map((courses) => courses.filter( course => 
course.Name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1))
);
}

Answer 1

尝试如下：

工作演示

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

Answer 2

我建议使用反应式形式，不要使用textFilter()方法。

使用响应式形式(这是您的过滤器选项)，您有另一个可观察的this.form.valueChanges。

您可以将此可观察与您的课程可观察相结合，如下所示：

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