angular / angular/components

bug(COMPONENT): UI not rendered when dynamically modifying data in a mat tree

Ouverte
#30,551 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: cdk/tree P3
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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.