bug(COMPONENT): UI not rendered when dynamically modifying data in a mat tree
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### Is this a regression?
- [x] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
17.1.5
### Description
Clicking on the node in the tree to dynamically add data doesn't update the UI.
### Reproduction
StackBlitz link: https://stackblitz.com/edit/2rhfgfpu?file=src%2Fexample%2Ftree-nested-child-accessor-overview-example.ts,src%2Fexample%2Ftree-nested-child-accessor-overview-example.html
Steps to reproduce:
1. Click on a node
2. The tree is not updated with the newly created node
### Expected Behavior
When i add a node, when the UI has to be updated.
### Actual Behavior
When i click on a node, i sometimes need to load dynamic data from the backend and append the created node to the node i just clicked.
We used to refresh the UI by assigning null to the data of the datasource and re-assigning the data to the datasource following this ticket : https://github.com/angular/components/issues/11381
Unfortunately, this does not work anymore because i have the following error : nodes is not iterable.
I checked the source code, and the error occurs in the tree component.
Funnily enough, when i modify the HTML to live reload the page, my nodes appear.
### Environment
- Angular: 19.1.5
- CDK/Material: 19.1.2
- Browser(s): Chrome Version 133.0.6943.98 (Official Build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Linux
Beitragsleitfaden
Rechercherichtung
Reproduziere die Regression im verknüpften StackBlitz, beginnend mit src/example/tree-nested-child-accessor-overview-example.ts und seinem HTML-Template. Untersuche dann den Quellcode der tree-Komponente an der Stelle, an der der Fehler “nodes is not iterable” auftritt. Die Aufgabe ist abgeschlossen, wenn dynamisch angehängte Kinddaten im tree ohne den Fehler und ohne einen Live-Reload gerendert werden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 38/100