Angular ngFor change detection with trackBy in iOS vs Android

Ionic Framework ionic-v3
1

I have an application connected with firebase, it fetches the whole object whenever any change happens to it.

Lets say I have an object like this:

  {
    count: 0,
    media: [{
      src: 'http://placehold.it/350x150'
    }, {
      src: 'http://placehold.it/350x250'
    }]
  };

whenever the count increases, I get the whole object from the backend with same src values.
Here’s what happens when the data binds with the view:

  • Android: The images doesn’t refresh since its the same src. (Expected behavior)
  • iOS (WKWebview): The images reloads every time when the new object gets assigned.

I’ve also tried using trackBy: media?.src but getting the same result.

Is this an issue with Angular’s trackBy or with the WKWebView???

Check this plunker.

2

First, your data structure is discouraged by Firebase. They have a slogan, “Arrays are bad.” The recommendation is to keep everything flat, so media would hold a pointer to a node in your realtime database that contained a list of sources. Something to keep in mind.

Second, your Plunkr changes the object reference of sampleData and all of its properties. This is absolutely going to trigger Angular change detection. If you want a change detector that only detects a change if the contents of the object property changes, regardless of what happens with the object references, you can always detach Angular change detection on that page, and write your own detector. Which isn’t hard to do, but this issue is happening in part because of thing three.

Thing three: you are using trackBy in an unsupported way. Pass a function to it, not the name of a property. Are you expecting trackBy to behave the same as AngularJS? Because it’s different in Angular 2.

1 Like
3

First, That was just a sample data and my data structure doesn’t contain any arrays as I know its not recommended.

Second, I know that changing object identity triggers Angular change detection thats why I tried using trackBy.

Third, THANK YOU!!! I didn’t realize that what I’ve used is deprecated and using a function for tracking works like a charm.