angular / angular/components

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

Aperta
#15,015 4 commenti 10 reazioni 0 assegnatari Vedi su GitHub
area: material/tree P4 perf
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### 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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla riproduzione collegata su StackBlitz e ispeziona il template mat-tree e il controller relativi all’aggiornamento dinamico delle foglie e alla funzione trackBy. Riproduci il problema con e senza trackBy, quindi traccia il comportamento di aggiornamento dell’albero. Il lavoro è completato quando l’aggiunta di una foglia mantiene l’albero reattivo e preserva la possibilità di espandere i nodi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.