6

I'm using latest stable versions of Angular (6.0.9) and PrimeNG (6.0.1). When I try to add child node to selected node programmatically it doesn't show up unless i collapse and then expand selected parent node. First i tried

this.selectedNode.children.push(this.nodeToAdd);

Then I saw in official documentation that if "you manipulate the value such as removing a node, adding a node or changing children of a node, instead of using array methods such as push, splice create a new array reference using a spread operator or similar". So i tried this:

this.selectedNode.children = [...this.selectedNode.children, this.nodeToAdd];

but it results in same behavior. Does anyone facing same issue, or am I doing something wrong? Issue is happening in Chrome, Firefox and Edge

Mihajlo Jovanovic
  • 173
  • 3
  • 8

2 Answers2

3

I had the same issue after moving from PrimeNG 5 to 6. The solution from Artem worked, but also caused flashing of the treetable.

I found another solution - just change the reference of root nodes, this will refresh the tree. Add this line after adding / removing nodes:

this.roots = [...this.roots]; // change "roots" to your variable name
Michal
  • 614
  • 8
  • 20
1

I've faced the same issue, spread operator also haven't worked for me, but fortunately I found workaround here (here they trying to refresh prime-ng datatable) It's not direct solution, but it can save you while bug in component (i believe so) isn't fixed.

Here's code from original answer, slightly changed for treetable:

visible: boolean = true;
updateVisibility(): void {
  this.visible = false;
  setTimeout(() => this.visible = true, 0);
}
<button (click)="updateVisibility()">

<p-treeTable *ngIf="visible"></p-treeTable>

P.S. I use Angular 5, but hope it will help anyway

Artem S.
  • 543
  • 5
  • 16
  • 1
    Well, it's a crafty workaround. I've just added setTimeout(() => this.visible = true, 0); you forgot it from original answer. Thank you. – Mihajlo Jovanovic Jul 30 '18 at 07:41