bug(COMPONENT): UI not rendered when dynamically modifying data in a mat tree
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Riproduci la regressione nello StackBlitz collegato, iniziando da src/example/tree-nested-child-accessor-overview-example.ts e dal relativo template HTML. Ispeziona quindi il codice sorgente del componente tree nel punto in cui si verifica l’errore “nodes is not iterable”. Il lavoro è completato quando i dati dei figli aggiunti dinamicamente vengono visualizzati nel tree senza l’errore e senza richiedere un live reload.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 38/100