Angular2 input text value is not showing although its model contain the value

Question

I got annoying situation with my Angular2 application, I have a table with several rows, each row contain columns with 2 way binding using [(ngModel)]. I have 2 buttons of Add and Delete and they push/splice the list of values that is used for the table.

When pushing a new item to the list or splice (delete) item from the list - the table is well updated.

The only bug is when I delete a row (item) from the list and then add a new item, one row from the table is then displayed with empty values somehow, when I checked the html source in Chrome's developer tool I saw that the model of the row is containing the correct value, so it is only a problem on display. How can it be?

Please show your code. If possible, try to reproduce the issue in [Plunker](http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5) — Yaron Schwimmer, Aug 15 '16 at 08:44

score 0 · Accepted Answer · answered Nov 20 '16 at 14:54

0

This is due to lack of display in Angular2 when delete element inside a loop, I solved it by changing delete action to do: clear the list items and create the same elements excluding the element that should be deleted.

answered Nov 20 '16 at 14:54

EH Sports

63
6

can you further explain this using an example – pTi Mar 06 '18 at 10:30
You should use immutable objects when display is based on list.push (if it is possible use immutable always) since the strategy of display changes is probably slow. check this: https://angular-2-training-book.rangle.io/handout/change-detection/enforcing_immutability.html – EH Sports Mar 22 '18 at 21:21

Angular2 input text value is not showing although its model contain the value

1 Answers1