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: stackoverflow.com/a/57011090/11303128 — Đỗ văn Thắng
– Đỗ văn Thắng, Commented Jul 15, 2022 at 5: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
– Reshu Kumari, Commented Jul 15, 2022 at 5:33

Drenai · Accepted Answer · 2022-07-15 10:34:23Z

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, 2022 at 10:34

Drenai

12.6k9 gold badges60 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vince Cyriac · Accepted Answer · 2022-07-15 05:21:18Z

-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, 2022 at 5:21

Vince Cyriac

1291 silver badge11 bronze badges

2 Comments

Reshu Kumari Over a year ago

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 Over a year ago

the code which I have written in que is just for understanding the problem... This is my actual code.. pastebin.mozilla.org/VFZZJVzV

Collectives™ on Stack Overflow

One way binding not working in angular in table

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related