CODEWITHSUNDEEP
angular
Jessie
Jessie

Reputation: 493

Why is not updated model in ngFor after changed model?

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.

Upvotes: 7

Views: 7309

Answers (4)

Rahul Venkatesh
Rahul Venkatesh

Reputation: 1

Instead you could do the following

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

Upvotes: 0

paragonid
paragonid

Reputation: 261

In my case filtering array instead of splicing it worked out

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

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

Upvotes: 1

cedric maroka
cedric maroka

Reputation: 15

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

Upvotes: 1

Plog
Plog

Reputation: 9622

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];

Upvotes: 11

Related Questions