Angular ngFor在Safari和Chrome中使用trackBy进行更改检测

Question

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:

• Chrome: The images doesn't refresh since its the same src . (Expected behavior)
• Safari: 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 is it just how Safari works???

Check this plunker .

Answer 1

The problem here is that trackBy: Object?.property is deprecated and using a tracking function trackBy: trackByFn works like a charm.

Though I think Chrome handles DOM changes more gracefully than Safari.