Nested tree does not correctly update

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Adding a node to the tree and firing a change event should update the tree

What is the current behavior?

The tree does not update

What are the steps to reproduce?

StackBlitz link line 123

Open the example, and within 10 seconds expand the Applications node.

The following code should add a node, and the node should be displayed:

    database.dataChange.subscribe(data => {
      this.nestedDataSource.data = data;
      console.log(data);             // <-- see screenshot below
      });
    console.log('Please expand the Applications node within 10 seconds');
    setTimeout(() => {
      const data = this.nestedDataSource.data;
      for (let node of data) {
        if (node.filename == "Applications") {
          const newnode = new FileNode();
          newnode.filename = "ghost";
          newnode.type = "gs";
          node.children.push(newnode);
          console.log("Added component");
        }
      }
      // force change
      console.log("Forcing change");
      database.dataChange.next(data);         // <-- firing event here
    }, 10000);

After ten seconds the console correctly logs the added component:

image

But the view does not update:

image

What is the use-case or motivation for changing an existing behavior?

I would expect the tree to mirror the underlying data model.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

It happens on chrome, with the latest version of the library.

Is there anything else we should know?

Sorry I could not make the example autoexpand (please see #13027 on why)

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:5
  • Comments:6

github_iconTop GitHub Comments

1reaction
juane1000commented, Nov 8, 2022

@juane1000 This is the issue with solution. There’s a lot to do in order to make it work but point is to use trackBy. A point to notice, which might not be obvious, is that trackBy value should consider child nodes as well. So if you follow the example I provided, you’ll notice that I change trackBy value of a parent when Adding or Deleting. Realistically, that should be a getter function on a node that calculates it’s value like id + children.value, or something along those lines.

Thanks for the feedback.

I did glance through the issue you linked before finding my way here. Incidentally I was already doing a dynamically generated trackBy return value. Basically just a concatenated string of prop names down the tree for a specific node. I think the reason it’s not working for me particularly is what you’re alluding to, my method will never change the trackBy return values since I’m not changing property names on the nodes so a difference won’t be identified. I’ll try using values of the children properties and see if that works.

0reactions
Cubelastercommented, Nov 8, 2022

@juane1000 This is the issue with solution. There’s a lot to do in order to make it work but point is to use trackBy. A point to notice, which might not be obvious, is that trackBy value should consider child nodes as well. So if you follow the example I provided, you’ll notice that I change trackBy value of a parent when Adding or Deleting. Realistically, that should be a getter function on a node that calculates it’s value like id + children.value, or something along those lines.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Mat-tree :Tree with nested nodes adding child doesnt update ...
Bug: When using mat-nested-tree-node with a nested datasource if you add a child to an existing parent it does not update the view....
Read more >
How to update nested mat-tree dynamically - Stack Overflow
I can change the data source data just fine and it is reflected in the logs, but the tree is never re-rendered this.dataSource.data...
Read more >
Angular Material Nested Tree With Updates - StackBlitz
ts#L215. Therefore cdk tree updates are not triggered. when objects references stays the same. In. order to solve that properly, all objects.
Read more >
Tree | Angular Material
Data source for nested tree. The data source for nested tree doesn't have to consider node flattener, or the way to expand or...
Read more >
Angular Material Tree - Javatpoint
The toggle collapse serves the tree control and can extend the tree node by setting [matTreeNodeToggleRecursive] to correct. Nested trees do not require...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found