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

Question

У меня есть список студентов и их выбранных курсов. Теперь мне нужно создать флажок для этих предметов, и после щелчка по конкретному предмету должен отображаться список студентов, которые выбрали эти конкретные предметы.используя FILTER, не formControl или любой другой метод.В HTMl

<div class="container">
<div class="row">
 <div class="col-4 border" (change)="event('change')" *ngFor="let obj of 
 NameBool">
<input type="checkbox" [(ngModel)]="obj.value"> {{obj.name}}<br>
  </div>
 <div class="col-8">
   <div class="row">
    <div class="col-6 bg-dark text-light">Name</div>
    <div class="col-6 bg-dark text-light">Course</div>
    </div>
    <div class="row" *ngFor="let st of showStudents">
    <div class="col-6 border">{{st.name}}</div>
    <div class="col-6 border">{{st.course}}</div>
 </div>
 </div>
 </div>
 </div>

в app.component.ts

 allStudents : Student[]=[
{name:'James',course:'Angular'},
{name:'Kary',course:'Android'},
{name:'Bob',course:'Java'},
{name:'Pam',course:'Java'},
{name:'Steve',course:'Angular'},
{name:'Williams',course:'Android'},
{name:'Julis',course:'Angular'},
{name:'Matt',course:'Java'},
{name:'Willy',course:'Android'},];

NameBool:NameBool[]=[{name:'Angular',value:true},
{name:'Android',value:true},
{name:'Java',value:true},
{name:'ALL',value:true},];
showStudents:Student[]=[];
 showCourses:string[];

 event(s:string){
 console.log(s);
 this.showStudents=this.showStudents.filter(this.showStudents.course===)
 }

ниже указан URL для получения полного проекта и файлов.

https://stackblitz.com/edit/angulaar-aman

Answer 1

Одним из способов достижения этого является отслеживание выбранных флажков, которые фильтруют массив студентов на основе выбранных параметров.

private showStudentsFromCourse(){
    let selectedCourses: string[] = [];
    const isAllSelected = this.courseOptions.find(course => course.name === 'All').value;
    if (isAllSelected) {
      selectedCourses = this.courses;
    }
    else {
      selectedCourses = this.courseOptions.map(course => {
        if (course.value) {
          return course.name
        }
      }).filter(Boolean);
    }
    this.showStudents = this.allStudents.filter(student => selectedCourses.indexOf(student.course) !== -1 );
  }

Код Stackblitz - https://stackblitz.com/edit/angulaar-aman-cwm81d