我正在使用NgPrime表,我正在练习学校申请。我正在使用考勤模块,我将用复选框显示所有学生名单,他们应该勾选出席者。所以我在复选框上触发了一个点击事件
如果未选中复选框,则无法获取值
.
<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代码:
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);
});
}
正如你在上面的代码中所看到的,我只是触发了一个关于复选框值变化的事件,所以我只能获得在场学生的数据。只要给我一些答案,就可以找到缺席的学生**(复选框中没有勾号)**
解决方案1:
我可以这样尝试,但我不喜欢:
在页面加载时,我可以保存数组中存在的所有regnum,当选中某个复选框时,我可以获取它的regnum值,并将其从上一个数组中拼接。我知道这是一个漫长而愚蠢的过程,我也想在ngprime表中获得提交点击的所有数据(这很容易,帮助我了解如何处理表中的数据)
解决方案2:我试过了
<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文件
submitattendance(student) {
console.log(student);
}
但控制台显示的只是我为学生创建的模型,而不是数据
提前谢谢,祝你愉快