使用 Angular 中的复选框从数组中删除数据？

Question

I have a mat-table with some data generated through an API, here's a snippet for example:

<mat-table [dataSource]="dataSource$">
     <ng-container matColumnDef="process">
        <mat-header-cell #checkBox *matHeaderCellDef> Process </mat-header-cell>
        <mat-cell *matCellDef="let execution"> {{execution.process}} </mat-cell>
     </ng-container>
     <ng-container matColumnDef="reprocess">
      <mat-header-cell *matHeaderCellDef>  
         <button tslbutton class="tslbutton" id="reprocessButton">
            Reprocess
         </button> 
      </mat-header-cell>
      <mat-cell id="reprocessCell" *matCellDef="let execution">
         <mat-checkbox (change)="reprocessHomeProcesses(execution)" class="checker"></mat-checkbox>
      </mat-cell>
   </ng-container>
</mat-table>

Basically, each row has a process and a checkbox. Above the checkbox is a button that will call an API with an array of the checked data. I need to add the "execution" data to an array by clicking the checkbox. Currently, I'm able to send the data to the TS using the (change) function. This calls the following function:

executions = []

reprocessHomeProcesses(exe) {
    this.executions.push(exe);
    console.log(this.executions)
  }

This successfully adds the execution object to the array. Looks like this:

[{process: 1234, ....}]

However, when I deselect, the checkbox, it adds the same object again

[{process: 1234, ....}, {process: 1234, ....}]

(as expected, I don't have any logic for this.executions.pop() yet) How can I rewrite the function so that when I deselect the checkbox, it removes the object from the array?

I consulted this question: Remove deselected checkbox value from Array using Angular but I could not seem to get it to work for my code, maybe there's some slight differences in layout. But any help to remove item from array when checkbox is deselected would be great help!

I think I have an understanding of the adding and removal I just dont really understand how to differentiate check vs uncheck.

Answer 1

My solution was pretty simple. I added an event to the function call - like this.

<tsl-checkbox #myCheckbox [checked] (change)="setHomeProcesses(execution, $event)"></tsl-checkbox>

reprocessHomeProcesses(exe, event: any) {
    if (event.checked) {
      this.reprocesses.push(exe)
    } else {
      var index = this.reprocesses.indexOf(exe)
      if (index > -1) {
        this.reprocesses.splice(index, 1);
      }
    }
  }

This works as needed here.