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

实现此目的的一种方法是跟踪选中的复选框，这些复选框根据选择过滤学生数组。

lorawan.set_datarate(0); // SF12 125 KHz

Stackblitz代码-https://stackblitz.com/edit/angulaar-aman-cwm81d

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

1 个答案: