angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.22k stars 6.69k forks source link

[mat-tree] Nodes are not updated correctly with trackyBy function set #11616

Open urosek opened 6 years ago

urosek commented 6 years ago

Bug, feature request, or proposal:

MatTree does not reflect the changes to the nodes if trackBy function is used. For example, I have several items with trackBy function pointing to their "id" property. If I provide a new array with completely same ids, but with changes to some of the other properties, change detection does not occur.

What is the expected behavior?

When used with trackBy function MatTree should trigger change detection on all nodes, just like ngFor with trackBy does.

What is the current behavior?

No changes are detected therefore data is not updated in template.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-z8ubtt

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest versions of Angular, Material (check StackBlitz). Any browser.

Is there anything else we should know?

Same issue was observed last year with MatTable.

achervatiuk-softheme commented 5 years ago

use forEachIdentityChange method in differ to track identity changes like as ngFor do?

lppedd commented 5 years ago

Still happening, any news?

josephperrott commented 5 years ago

@andrewseguin Can you take a look since it looks like most of the logic for this is reused between the Table and Tree

schuchard commented 4 years ago

I think the behavior in your stackblitz is working as expected. You're telling the trackBy function to track each change based on the id value. The initial value and the next value both have and id === 1 so the Tree doesn't see any changes.

If you change your tracking function to either of these it works.

treeTracker = (index, person) => person;
treeTracker = (index, person) => person.id + person.name;

or if the id changes for the button action, the tree updates


changeName() {
  this.dataSubject.next([{id: 2, name: 'Kara', expandable: false, level: 0}]);
}```
samyue commented 4 years ago

@schuchard , however, the way of how treeTracker works is different with the trackBy of ngFor. ngFor will update the item if the item can be identified as same item (but item properties may be changed) by TrackBy. The purpose of trackBy is only for performance by not destroying an item's dom if it's just has some property changes.

phoenix09208 commented 2 years ago

Any update on this?

pburgmer commented 1 year ago

We also run into this problem.

DavidJournot commented 2 weeks ago

Same issue here, mat-tree does not update when trackBy is used. The issue appears both in zone.js-enabled and zoneless apps, change detection does not occur.