我正在使用NgPrime表,我正在练习学校申请 . 我正在使用考勤模块,我将显示所有学生列表并带有一个复选框,他们应该勾选出席的人 . 所以我在复选框上触发了一个Click事件但是 I am not getting Values where checkbox is not Selected .
<ng-template pTemplate="body"
let-student
let-i="rowIndex"
>
<tr [pSelectableRow]="student">
<td >{{i+1}}</td>
<td>{{student.regnum}}</td>
<td>
<p-checkbox name="groupname" value="val1" (click)="attendance($event, student)"></p-checkbox>
</td>
<td>
</td>
</tr>
</ng-template>
TS Code:
ngOnInit() {
//Get students data on page load
this.http.get('http://localhost:3000/api/student/studentslist').subscribe(res => {
let data = res.json();
this.student = data;
});
// For ngprime column names
this.cols = [
{ field: 'S.No', header: 'S.No' },
{ field: 'regnum', header: 'Regnum' },
{ field: 'attendance', header: 'Attendance' }
];
}
//Save student regnums who are present
attendance(checkbox, student) {
if(checkbox.srcElement.checked) {
this.checkedstudents.push(student.regnum);
}
else {
this.removeStudent(student.regnum);
}
}
//Remove Students who are clicked after unselecting the checkbox
removeStudent(regnum){
this.checkedstudents.forEach((item, index) => {
if(item === regnum) this.checkedstudents.splice(index,1);
});
}
正如你在上面的代码中看到的那样,我只是触发了一个关于复选框值变化的事件,所以我只能得到学生在场的数据 . 请给我一些答案,找到缺席的学生**(没有勾选的复选框)**
Solution1: 我可以尝试这种方式,但我不喜欢:
在页面加载时,我可以保存数组中存在的所有regnum,当选中某个复选框时,我可以获取它的regnum值并将其与前一个数组拼接 . 我知道这是一个漫长的过程和愚蠢的事情,我也希望获得关于提交点击的所有数据在ngprime表中(这很容易,并帮助我学习处理表中的数据)
Solution2: I Tried
<ng-template pTemplate="footer" let-student>
<tr>
<td>
<button type="submit" style="width: 50%;"
class="btn btn-2 btn-2g" (click)="submitattendance(student)">Submit</button>
</td>
</tr>
</ng-template>
TS file
submitattendance(student) {
console.log(student);
}
但是控制台只显示我为学生创建的模型,而不是数据
在此先感谢,快乐编码
1 回答
如果您在
student
对象中有任何属性exchecked
(或者您可以使用新属性)与复选框绑定,则可以通过ngModel
绑定并获取其属性已被选中的所有学生的列表 .无需
click
事件 .