Question

我正在使用NgPrime Table，正在练习学校申请。我正在使用“出勤模块”，并且将显示一个带有复选框的所有“学生”列表，他们应该勾选谁在场。因此，我在复选框上触发了Click事件，但我没有在未选中复选框的地方得到值。

          <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表中获取有关Submit Click的所有数据（这很容易，可以帮助我学习处理表中的数据）

解决方案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);
 }

但是控制台仅显示我为学生创建的模型，而不显示数据

谢谢，祝您编码愉快

Answer 1

如果您在checked对象中拥有student对象的任何属性（或可以使用新属性）来与复选框绑定，则可以通过ngModel进行绑定并获取所有学生的列表其属性已检查。

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

不需要click事件。

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

1 个答案: