Typescript: Array not storing objects - angularjs

Question

I'm trying to assign row object to an array from a check box click event. For this i have created a global array like below.
SelectedGrid: any[] = [];
At the moment of clicking it seems it going into the array, but when i checked the second checkbox 1st item is gone missing from the array.
May I know why that happens?
following is the function i call in check box click event.
public clickConditionRow(row, col, rowSelected) {
if (rowSelected.isChecked) {
this.SelectedGrid.push(rowSelected);
console.dir(this.SelectedGrid);
console.log(this.SelectedGrid.length);
} else {
console.log("Unselected ");
var toDel = this.SelectedGrid.indexOf(rowSelected);
this.SelectedGrid.splice(toDel);
console.dir(this.SelectedGrid);
}
if (!this.rootScope.$$phase) {
this.rootScope.$apply();
}
// for print the values
for (var y = 0; y < this.SelectedGrid.length; y++) {
console.log("Element " + y + " = " + this.SelectedGrid[y]);
console.dir(this.SelectedGrid[y]);
}
}

Answer 1

I cannot reproduce your bug (maybe you are overriding the array somewhere else?) but I see 2 potential problems and want to point them out:
Using indexOf with and object might not work and return -1 (see the code below)
splice(toDel) should be splice(toDel, 1) or it will delete all items staring from index toDel to the end of the array.
const a = { id: 1 }
const b = { id: 2 }
const list = [ a, b ]
// This returns 1
console.log(list.indexOf(b))
// This returns -1
console.log(list.indexOf({ id: 2 }))