0

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.

benmessi12040
  • 43
  • 5
  • Share data inside `exe` and `this.executions` and on which basis you want to remove item? – navnath Oct 06 '21 at 20:50
  • Execution is what is used to generate the rows. this.executions is the array that the row data gets added to after the checkbox is checked. I want to remove item when the checkbox is unchecked. – benmessi12040 Oct 06 '21 at 20:55
  • But upon uncheck on which basis you are goin to remove item from `this.executions`, there must be some unique `id` – navnath Oct 06 '21 at 20:58
  • I am not sure how to assign a unique id to each checkbox since they are being automatically generated by the API. There is a checkbox for every row and there are thousands of rows across hundreds of pages. Before I tried adding the checkboxes to the array by using a separate button but that had its own issues. – benmessi12040 Oct 06 '21 at 21:01
  • Share some sample data inside array `this.executions` and what you get sinside `exe` upon check and uncheck – navnath Oct 06 '21 at 21:03
  • I included a separate cell for process, which is generated from execution.process, see first half of example. Process is basically just a number. There are some other fields but basically after checking a box this.executions is literally just a basic list of objects. – benmessi12040 Oct 06 '21 at 21:10
  • @navnath i see what you meant, I added example in question. – benmessi12040 Oct 06 '21 at 21:20
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/237907/discussion-between-benmessi12040-and-navnath). – benmessi12040 Oct 06 '21 at 21:23
  • Try this solution from here https://stackoverflow.com/questions/48046959/angular5-need-function-to-check-uncheck-mat-checkbox-inside-mat-table – navnath Oct 06 '21 at 21:45
  • @navnath provided better example in chat – benmessi12040 Oct 06 '21 at 22:08

1 Answers1

0

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.

benmessi12040
  • 43
  • 5