Why is not updated model in ngFor after changed model?

Question

I have an property:

public rows: any[];

Then I fill this array in constructor:

this.rows.push({"id": 1, "subject": "Subject", "scope": "Learn basics", "hours": 2});

In template I iterate array like as:

<tr *ngFor="let p of rows; let i = index;">

So, if I remove element from array:

this.rows.splice(this.rows.length - 1, 1);

It does not change model, I see as before one row in array.

`this.rows.splice(this.rows.length - 1, 1);` is probably called from code outside Angulars zone and change detection doesn't recognize the change. — Günter Zöchbauer, Dec 07 '17 at 11:21
No, I call this in the same component class in method of class — Jessie, Dec 07 '17 at 11:23
Could you try: `this.rows = this.rows.splice(this.rows.length - 1, 1);` and log splice afterwards. Oh and do you use AngularJs or Angular (just to verify) — Doomenik, Dec 07 '17 at 11:25
Return a new array with the spread operator or using filter to get an element out. — AndreaM16, Dec 07 '17 at 11:26
`this.rows = this.rows.splice(this.rows.length - 1, 1);` returns always the same number of rows — Jessie, Dec 07 '17 at 11:29
this.rows.splice(this.rows.length - 1, 1); shouldn´t it be just this.rows.splice(-1, 1); — Doomenik, Dec 07 '17 at 11:34
in the constructor you set your `rows` array to have exactly one object. `this.rows.splice(this.rows.length - 1, 1)` goes to your `rows` array and returns a new array with exactly one item starting from position 0 in your original array. So actually, you are replacing your old array with the new one which has the same single object. Thus, nothing changes in HTML. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) — Andriy, Dec 07 '17 at 11:36

Plog · Accepted Answer · 2017-12-07T11:42:32.820

11

Angular doesn't recognise an array as having been changed if only it's contents have been changed. To let it know the array has changed just reassign the array object after removing an element and it should update on the DOM:

this.rows.splice(this.rows.length - 1, 1);
this.rows = [...this.rows];

edited Dec 07 '17 at 11:42

answered Dec 07 '17 at 11:40

Plog

9,164
5
41
66

What is `this.rows = [...rows];`? – Jessie Dec 07 '17 at 11:41
I missed the this. editted now. But basically it just creates a new array from the elements of the old array and reassigns it. This makes the actual array object change so that the change is picked up by angular. – Plog Dec 07 '17 at 11:43
@Jessie its spread operator. You can read more about: http://es6-features.org/#SpreadOperator – Tavish Aggarwal Dec 07 '17 at 11:44
I use TypeScript – Jessie Dec 07 '17 at 11:44
This is typescript – Plog Dec 07 '17 at 11:45
4

It does not work: `this.rows.splice(this.rows.length - 1, 1); this.rows = [...this.rows];` – Jessie Dec 07 '17 at 11:48
@Plog Thank you so much this was my problem – YourGoodFriend Oct 02 '18 at 18:04

score 1 · Answer 2 · answered Dec 08 '17 at 13:22

1

re-assign the array so that angular can notice a change and update the array

answered Dec 08 '17 at 13:22

cedric maroka

17
3

score 1 · Answer 3 · answered Mar 12 '18 at 13:52

1

In my case filtering array instead of splicing it worked out

array.splice(removeIndex, 1) // replaced with

array = array.filter(
  (element, index) => removeIndex !== index
)

answered Mar 12 '18 at 13:52

paragonid

241
2
8

score 0 · Answer 4 · answered Apr 08 '20 at 08:38

0

Instead you could do the following

this.rows.splice(this.rows.indexOf(this.rows.length - 1), 1);

answered Apr 08 '20 at 08:38

Rahul Venkatesh

1

Why is not updated model in ngFor after changed model?

4 Answers4

Linked