当表格行的复选框值更改时检索对象

Question

在下表中，当我通过单击checkbox控件更改status时，我需要在console.log在此处表示为cId的课程 ID。 我怎样才能做到这一点 ？

HTML

    <table mat-table [dataSource]="dataSource">

          <!-- Position Column -->
          <ng-container matColumnDef="cId">
            <th mat-header-cell *matHeaderCellDef> Course Id </th>
            <td mat-cell *matCellDef="let element"> {{element.cId}} </td>
          </ng-container>
          
          <!-- Name Column -->
          <ng-container matColumnDef="courseTitle">
            <th mat-header-cell *matHeaderCellDef> Course Title </th>
            <td mat-cell *matCellDef="let element"> {{element.courseTitle}} </td>
          </ng-container>

          <ng-container matColumnDef="courseStatus">
            <th mat-header-cell *matHeaderCellDef> Status </th>
            <td mat-cell *matCellDef="let element"> <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" 
                      (change)="changeStatus($event)">
            </div>
           </td>
          </ng-container>
    </table>

.TS

changeStatus(event: any){
  console.log("Status "+ JSON.stringify(event.target.value));
}

Answer 1

有一个更好的方法来做到这一点。 您需要传递元素，如下面的代码所示。

      <ng-container matColumnDef="courseStatus">
        <th mat-header-cell *matHeaderCellDef> Status </th>
        <td mat-cell *matCellDef="let element"> <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" 
                  (change)="changeStatus($event, element)">
        </div>
       </td>
      </ng-container>

.TS

changeStatus(event: any, element: any){
  console.log("Status "+ JSON.stringify(event.target.value));
  console.log("Status "+ JSON.stringify(element));

}

Answer 2

在 ngOnChanges hook 中尝试一些东西（我把这个写在我的脑海中）：

ngOnChanges(changes: any) {
    if (changes.element && changes.element.cId && changes.element.cId.currentValue && changes.element.cId.previousValue != changes.element.cId.currentValue) {
        console.log(changes.element.cId.currentValue);
    }
}