One way binding not working in angular in table-CodePudding

I have html table and I am binding data from an array in that table. I am changing some values in the array but my changes are not getting reflected in the table. The data is not binded properly. How can I solve this issue.

Html code -

<tr *ngFor="let process of processToShow; let i = index">
<td>{{ process.processName}}</td>
<td >
  {{ process.processStatus }}
</td>
</tr>

I have an array in ts file like:

processToShow: Array[any] = [{id: 1, processName:"P1", processStatus:"Running"},
{id: 2 processName:"P2", processStatus:"Not Running"},
{id: 3, processName:"P3", processStatus:"Running"}];
..
    this.processToShow[1].processStatus="Starting.."

I want to change the value from view to source but it is not giving correct value in Html table printing the old value only.

Any ways through which I can properly bind values in HTML table from the source.

CodePudding user response：

Angular change detection won't trigger if you mutate the objects in the array

this.processToShow[1].processStatus="Starting.."

You should use an approach that updates the array in an immutable manner

CodePudding user response：

I think there is an issue with your declaration of array variable Try updating code as follows

processToShow: Array<any> = [
  {id: 1, processName:"P1", processStatus:"Running"},
  {id: 2, processName:"P2", processStatus:"Not Running"},
  {id: 3, processName:"P3", processStatus:"Running"}
];

...

this.processToShow[1].processStatus="Starting.."