Отфильтруйте курсы по категориям, используя флажок угловой материал

Question

У меня есть два массива с именами 1.Курсы и 2.Категории каждый курс имеет свою категорию, я хочу отфильтровать курсы по категории с помощью mat-checkbox.

пример: javascript - это название курса, а scripting - это категория .

Здесьэто стекаблицкая ссылка и ниже снимок экрана с подходом:

Должно работатьпри многократной фильтрации флажков Заранее спасибо.

Answer 1

Итак, самый простой способ сделать это с вашим текущим подходом, 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;
   });
 }

Обновлен блиц с предложением: https://stackblitz.com/edit/mat-checkbox-kq6xgd