angular / angular/components

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

Offen
#15,015 4 Kommentare 10 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/tree P4 perf
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion und untersuche das mat-tree-Template und den Controller rund um die dynamische Blattaktualisierung und die trackBy-Funktion. Reproduziere das Problem mit und ohne trackBy und verfolge anschließend das Aktualisierungsverhalten des Baums. Erledigt ist die Aufgabe, wenn das Hinzufügen eines Blatts den Baum reaktionsfähig hält und die Möglichkeit zum Erweitern von Knoten bewahrt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.