首页 文章

Angular NgPrime表获取未选中复选框的所有数据

提问于
浏览
0

我正在使用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);
    });
 }

正如你在上面的代码中看到的那样,我只是触发了一个关于复选框值变化的事件,所以我只能得到学生在场的数据 . 请给我一些答案,找到缺席的学生**(没有勾选的复选框)**

enter image description here

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 回答

  • 0

    如果您在 student 对象中有任何属性ex checked (或者您可以使用新属性)与复选框绑定,则可以通过 ngModel 绑定并获取其属性已被选中的所有学生的列表 .

    <p-checkbox name="groupname" [(ngModel)]="student.checked"></p-checkbox>
    

    无需 click 事件 .

相关问题