One way binding not working in angular in table

Question

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.

You can refer to this: https://stackoverflow.com/a/57011090/11303128 — Đỗ văn Thắng, Jul 15 '22 at 05:16
@ĐỗvănThắng sadly that answer did not work for me.. But you understood my problem my table values are not getting updated in view even they show as updated in console — Reshu Kumari, Jul 15 '22 at 05:33

score 0 · Answer 1 · answered Jul 15 '22 at 10:34

0

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

answered Jul 15 '22 at 10:34

Drenai

11,315
9
48
82

score -1 · Answer 2 · answered Jul 15 '22 at 05:21

-1

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.."

answered Jul 15 '22 at 05:21

Vince Cyriac

109
1
10

I wrote it wrong in que.. I am actually doing this way only.. The actual problem is my table values are not getting updated in view even they show as updated in console when I update the array elements in ts file. They are not binding properly. Thanks for your ans! – Reshu Kumari Jul 15 '22 at 05:36
the code which I have written in que is just for understanding the problem... This is my actual code.. https://pastebin.mozilla.org/VFZZJVzV – Reshu Kumari Jul 15 '22 at 05:53

One way binding not working in angular in table

2 Answers2