使用角度材料复选框根据那里的类别过滤课程

Question

我有两个数组，分别称为 1.Courses和2.Categories 。每个课程都有不同的类别，我想使用 category 来过滤 courses 垫复选框。

示例： javascript 是课程名称，脚本是类别。

这是 stackblitz link 下面是该方法的屏幕截图：

它应可用于多个复选框过滤。谢谢。

Answer 1

因此，采用当前方法IMO的最简单方法是创建一个新的课程数组 sex data quantile_0.1 quantile_0.25 quantile_0.5 quantile_0.75 quantile_0.9 <fct> <list> <dbl> <dbl> <dbl> <dbl> <dbl> 1 F <tibble [512 x 1]> -1.31 -0.758 0.0400 0.623 1.32 2 M <tibble [488 x 1]> -1.37 -0.795 -0.178 0.603 1.25 并在模板中对其进行迭代。

filteredCourses，将OnInit设置为filteredCourses，以便将它们全部呈现为init。

courses

接下来，您需要某种方式来维护所选类别的列表。如果您使用内置表单的Angulars，这会容易得多，但是如果没有，我可能建议以下做法：

ngOnInit() { this.filteredCourses = this.courses; } （单击），将单击的类别添加到所选类别的列表中（单击时，如果不存在，则添加它，否则将其删除）

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

更新后的闪电战建议：https://stackblitz.com/edit/mat-checkbox-kq6xgd