bug(COMPONENT): UI not rendered when dynamically modifying data in a mat tree
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
### 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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Reproduisez la régression dans le StackBlitz lié, en commençant par src/example/tree-nested-child-accessor-overview-example.ts et son template HTML. Inspectez ensuite le code source du composant tree à l’endroit où l’erreur “nodes is not iterable” se produit. Le travail est terminé lorsque les données enfants ajoutées dynamiquement s’affichent dans le tree sans l’erreur et sans nécessiter de rechargement à chaud.
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é
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 38/100