Angular 2 - Update *ngFor table after data has changed - arrays

Question

Normally I would expect this to update in realtime, but it doesn't seem to be doing so. In my angular app, I have an array that stores a string and another array like so:
var myArray= [{id:"name1",array:{"id1", "id2"}]
And then in my html I have a table that lists every item in myArray in a row
<table *ngFor="item in myArray">
<td>{{item.id}}</td>
<td>{{item.array}}</td>
</table>
The items in the array are added in a function that is bound to a button click. So the users will chose from a list of items, click a button, and those choices get pushed to the array. They are also able to go back and delete some of those items, so I am adding in code to handle the check every item in myArray, and if its array contains that item that was deleted, it will remove it.
for(let i=0; i<myArray.length;i++) {
let row:any = myArray[i];
for(let k=0; k<row.array.length;k++) {
if(row.array[k] == deletedItem) {
row.array.splice(index, 1);
}
}
}
The code works, using console logs I am able to see that the deletedItem is removed from any item in myArray's array (sorry for the confusing variable names!). However, the table doesn't reflect the updated values, even when myArray shows it when submitting or printing to console. Do I have to refresh the table? I thought it should update automatically since the data is bound.

Answer 1

From this code, I think you are not deleting any element from myArray, but from the local variable row. That's why in your template, you don't see any change.
Try with this :
for(let i=0; i<myArray.length;i++) {
let row:any = myArray[i];
for(let k=0; k<row.array.length;k++) {
if(row.array[k] == deletedItem) {
myArray[i].array.splice(k, 1);
}
}
}

Answer 2

I ran into the same problem today and nearly tore my hair out trying to figure it out. Just like you, my console.log looked right but my data wasn't updating even though it was bound. The reason it won't update is that the data source is immutable and the only way to have it update is by assigning the spliced ArrayList to a new array and then assigning it to the data source.
The data I'm going to use is from https://material.angular.io/components/table/overview this is their property, not mine.
EX:
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];
this.dataSource = ELEMENT_DATA;
remove(){
//this is where I splice
this.dataSource.splice(1,1);
//this is where I assign it to the new array.
const ELEMENT_DATAS: PeriodicElements[]=[...this.dataSource];
//this sets the new array to the data source updating it and updating the
table on the UI
this.dataSource = ELEMENT_DATAS;
}