Angular 2 view not updates on array change

Question

I have an array of objects with properties name and age. Name of the array is person.

Problem is when i update the property of an element of array as :

this.person[0].name = "godfather";

original array is updated but component view remains as it is. I figured out the problem is angular change detection doesn't consider updation inside an array as a change. So, i tried below statement (changes reference to array):

this.person = this.person.slice();

I just want to know, Is using the later statement a good practice or there is some better approach to deal with the above problem?

I cannot replicate your problem. See stackblitz.com/edit/angular-5sa3pe. What should I change to replicate it — Saksham
– Saksham, Commented May 18, 2019 at 11:23

Günter Zöchbauer · Accepted Answer · 2016-07-29 13:17:10Z

1

It depends on the cost of this slice() operation. If it's for small arrays it might not cause any harm but if it is for large arrays it may cause notable performance issues. In this case using an observable that notifies the receiver actively about changes is a better way.

answered Jul 29, 2016 at 13:17

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

5 Comments

mishap Over a year ago

What would be a better solution?

Günter Zöchbauer Over a year ago

An observable or using IterableDiffer github.com/angular/angular/blob/…, perhaps others. Depends on the concrete use case.

Saksham Over a year ago

I cannot replicate your problem. See stackblitz.com/edit/angular-5sa3pe. What should I change to replicate it

Saksham Over a year ago

Another one where I am passing array of objects to child component stackblitz.com/edit/angular-qqvpsd

Saksham Over a year ago

@GünterZöchbauer I have added a question as well to elaborate my concern stackoverflow.com/questions/56200638/…

hholtij · Accepted Answer · 2016-07-29 13:12:30Z

1

Your approach is an unspecified use of slice that may work with some but not all JS implementations. I have used this with success:

this.person = JSON.parse(JSON.stringify(this.person));

edited Jul 29, 2016 at 13:12

answered Jul 29, 2016 at 13:05

hholtij

2,9466 gold badges29 silver badges43 bronze badges

6 Comments

Günter Zöchbauer Over a year ago

This seems rather expensive in compairson. Do you you have a link that provides more information about where slice() might not work?

hholtij Over a year ago

The JSON approach is more expensive, yes. However, if it's only used in UI and not in loops or otherwise time-critical code I don't see a problem. According to the specification slice needs at least one parameter. Calling it with no parameter is not specified.

Günter Zöchbauer Over a year ago

Just slice(0) would do then I guess as well?

hholtij Over a year ago

I haven't tried it but yes that should work and would be less expensive. The JSON approach I have tried and it works.

hholtij Over a year ago

Also, slice only performs a shallow copy. If the array contains objects slice won't work for this purpose. In fact, if I understand the OP correctly, it is an array of objects and that's why it won't work.

|

Collectives™ on Stack Overflow

Angular 2 view not updates on array change

2 Answers 2

5 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related