使用过滤器通过多个复选框获取值

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===)
 }

以下是获取完整项目和文件的网址。

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