How can i maintain a checked state of a particular checked row after the datasource from the table reloads?

Question

I have a mat table that contain checkboxes. A user is able to do operation on each row at a time. Once the operation of a particular row is completed, the number of time that particular row was invoked increases and its saved back to the database, then fetched back and displays on one of the columns of the same table using this column in desc order.

The problem is, when the numberOfOperations Updates, I have to do another get call to update the table column NumberOfOperations time so it uncheck the checkbox of the row that was operated on and makes it hard to keep track which row was operated on here is a snippet of code. My goal is to maintain the checkbox for the row operated on checked after the table datasource refreshes

<mat-checkbox(click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row.docId) : null" [checked]="selection.isSelected(row)"> </mat-checkbox>

  performOperation(){
     //1. performs some operations once. 
     //2. calls the function thatshows how many times row was used
     this.IncNumber()

  }

  //update the selected row. 
  IncNumber(){
    this.myDataService.updateDataServices(this.objectId                                       
    .subscribe(data =>{
     this.refresh()
  })}

  //refresh the table with updated data
  refresh(){
   getDataForTable();
  }

I have very limited knowledge about Angular, but it seems you have 2 options. 1. If you want to save 'NumberOfOperations' for all users, you need to send this value to backend to fetch it everytime 2. If you just want to save 'NumberOfOperations' for current session, use Map to store NumberOfOperations against row id — Atul Kumbhar
I already save the number. it only updates and when it updates I have to do another fetch to get the updated number and that's when the checkbox uncheck — jbaptj
After refresh, you might need to update row with respective 'NumberOfOperations' — Atul Kumbhar

Hitech Hitesh Hitech Hitesh · Accepted Answer · 2019-12-06T05:08:56

Use and array of checkedRows and then in the checked property of the checkbox check if this is operated on or not like below

<mat-checkbox(click)="$event.stopPropagation()" 
        (change)="$event ? selection.toggle(row.docId) : null"
         [checked]="selection.isSelected(row)">
  </mat-checkbox>

Here you have not added the selection.isSelected(row) function

In that function you can just check go through each element using foreach function of the array and check if the element is present in the selected array of present the. Mark it's checkbox to selected

For this you have to first add the selected row in to the selected array for it every time if the checkbox is checked and remove the row everytime of the checkbox is unchecked

How can i maintain a checked state of a particular checked row after the datasource from the table reloads?

1 Answers