angular / angular/components

(bug)[Mat-Tree] - Problematic behavior when combining dynamic data with trackby

Ouverte
#15,015 4 commentaires 10 réactions 0 personnes assignées Voir sur GitHub
area: material/tree P4 perf
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### What is the expected behavior?
There should be a way to be able to dynamically update leaf nodes within a tree without forcing a collapse upon the tree.

#### What is the current behavior?
Utilizing a `trackBy` function to track an individual node by something like an ID causes the entire tree to become unresponsive after a change is made to the data. When the `trackBy` is omitted, the tree continues to respond after data changes, but any open nodes will collapse and you will have to re-navigate to the previously opened node.

#### What are the steps to reproduce?
Please reference the following stackblitz. Clicking the 'new' button will cause a new leaf to be created under node ID 1. Once this happens, you will see that all nodes will collapse, and clicking on the chevron will not prompt them to open. If you navigate to the template for the controller, and remove the `trackBy` function from the `mat-tree` element, you will find that upon clicking 'new' the tree will continue to collapse, but you will be able to re-expand individual nodes and see the new leaf.

https://stackblitz.com/edit/angular-afy2h1

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et examinez le template mat-tree ainsi que le contrôleur autour de la mise à jour dynamique des feuilles et de la fonction trackBy. Reproduisez le problème avec et sans trackBy, puis suivez le comportement de mise à jour de l’arbre. Le travail est terminé lorsque l’ajout d’une feuille permet à l’arbre de rester réactif et préserve la possibilité de développer les nœuds.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.