ngx-datatable, uncheck item is rendered after the element is not visible

Question

What I'm trying to do is assign a Limit number of checked items I can have on my ngx-datatable

ant this is the code I'm using:

onSelect({ selected, event }) {
    if (this.checkboxLimit <= 0 ) { //THIS IS WORKING FINE
      this.selected.splice(0, this.selected.length);
      this.selected.push(...selected);
      this.checkedItems = selected;
      this.numberOfSelectedCheckboxes.emit(this.checkedItems.length);
      return;
    }

    if (selected.length === 0 ) {  //THIS IS WORKING FINE
      this.selected = [];
      this.checkedItems = [];
      this.lastSelection = [];
      this.numberOfSelectedCheckboxes.emit(0);
      return;
    } else if (selected.length === 1 ) { //THIS IS WORKING FINE
      this.selected = [...selected];
      this.checkedItems = [...selected];
      this.lastSelection = [...selected];
      this.numberOfSelectedCheckboxes.emit(1);
      return;
    } if(selected.length === this.checkboxLimit + 1) {  //THIS IS NOT WORKING!
      this.checkedItems = [...this.lastSelection];
      this.selected = [...this.lastSelection];
      this.tableOffset = 0;

      console.log('Uncheck the element!!!!');
      return;
    } else {  //THIS IS WORKING FINE
        if(selected.length > this.checkboxLimit) {
          this.selected = [...this.items.splice(0, this.checkboxLimit)];
          this.checkedItems = [...this.selected];
          this.lastSelection = [...this.selected];
          
          this.numberOfSelectedCheckboxes.emit(this.checkedItems.length);
          return
        }
        this.selected = [...selected];
        this.lastSelection = [...selected];
        this.checkedItems = [...selected];
        this.numberOfSelectedCheckboxes.emit(this.checkedItems.length);
    }    
  }

Well, if I press on select all, it gonna select all the elements I need, also I'm using a variable to know who are the checkboxes previously selected.

Well, my issue is after executing this line: this.selected = [...this.lastSelection]; the variable this.selected is assigned to the right number of elements. But the table in my browser still has the checkbox checked. BUT, if I scroll up or scroll down until the checkbox is not visible and I try to come back to it, the checkbox is unchecked.

For some reason, it's waiting to be rendered. Does someone have a solution for this? Also, I'm trying to execute this.tableOffset = 0; (but is not working) to try to send the table to the top, only try to render it again, but I don't really need that piece of code.

Answer 1

I didn't find a good solution, my only alternative was using a alert control, and once the user press the ok inside of my alert, i'm trigering the method:

this.checkedItems = [...this.lastSelection];
this.selected = [...this.lastSelection];

I know, that doesn't have any sense, but it worked. I think this happens because it delays the update of the variable.