angular-material - 使用角度材料复选框根据类别过滤课程
问题描述
我有两个名为1.Courses 和 2.Categories的数组,每个课程都有不同的类别我想使用 mat-checkbox按类别过滤课程。
示例: javascript是课程名称,脚本是category。
这是stackblitz 链接 ,下面是该方法的屏幕截图:
它应该适用于多个复选框过滤提前谢谢你。
解决方案
因此,使用当前方法 IMO 执行此操作的最简单方法是创建一个新的课程数组filteredCourses
并在模板中对其进行迭代。
OnInit
, 设置filteredCourses
为courses
所以它在初始化时将它们全部呈现。
ngOnInit() {
this.filteredCourses = this.courses;
}
接下来,您需要某种方式来维护所选类别的列表。如果您使用内置表单的 Angulars,这会容易得多,但是,如果没有,我可以建议以下内容:
onSelect
(单击),将单击的类别添加到所选类别的列表中(单击时,如果不存在,则添加它,否则,将其删除)
onSelect(selectedCategory: any) {
this.selectCategory(selectedCategory);
}
selectCategory(selectedCategory: any) {
const index: number = this.selectedCategories.findIndex((cat: any) => {
return cat.id === selectedCategory.id
});
if ( index === -1) {
this.selectedCategories.push(selectedCategory);
} else {
this.selectedCategories.splice(index, 1);
}
}
然后,下一步是将您的courses
数组过滤为仅categoryId
包含在列表中的数组,并使用结果selectedCategories
设置您的filteredCourses
数组,从而允许更新模板。因此,您的onSelect
功能变为:
onSelect(selectedCategory: any) {
this.selectCategory(selectedCategory);
this.filteredCourses = this.courses.filter((course: any) => {
return this.selectedCategories.findIndex((cat: any) => {
return course.categoryId === cat.id;
}) !== -1;
});
}
推荐阅读
- node.js - Express & Firebase - 无法在重定向前设置标头
- python - 有人可以解释一下这里发生的调用堆栈吗?它调用 D、B、C、A。你能提供它是如何发生的吗
- mysql - 子查询中的mysql最小值和最大值
- java - 如何使用 android studio 在本地存储应用数据?
- c# - SWIG/C#:转换 std::vector
到字节[] - java - 在 GridPane JavaFx 中选择单元格
- dart - Stack父级上的相对位置
- php - 使用 PHP 和 SQL 的日期间隔
- javascript - 变量的setter可以调用它的getter吗
- android - 不能在意图中同时传递多个整数