Replace Element in Array does not refresh Angular-Table-CodePudding

I have created a HTML-Table in Angular. The rows will be propagated like

<tr mdbTableCol *ngFor="let el of filteredElements;">
    <td align="right">{{el.totalExpenses | number : '.2-2'}}</td>

When I refresh an Element in the Array filteredElements, the View is not updated. Here is my code for refreshing the Array:

this.filteredElements[this.filteredElements.findIndex(el => el.id === old.id)] = newElement;

What do I have to do to update the value in the table in Angular (the table should for example show the new value for totalExpenses).

CodePudding user response：

The JavaScript spread operator (...) allows us to quickly copy all or part of an existing array or object into another array or object

this.filteredElements = [...this.filteredElements]

CodePudding user response：

Is the filteredElements object updated in one component and passed to another component (parent child relations with @Input or something)?

If so, inorder for the angular change detection to be triggered by default, the entire array needs to be refreshed or repopulated. Other option would be to manually trigger the change detection or identifying the changes (using OnChanges()) and acting on the change