angular / angular/components

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

Offen
#30,551 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/tree P3
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

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

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