I am working with a PrimeNg p-tree component
<p-tree [value]="treeNodes" selectionMode="single" [(selection)]="selectedNode"></p-tree>
The treeNodes are defined using ng-templates, with one template looking like this:
<ng-template let-node pTemplate="stagebased" >
<input [(ngModel)]="node.label" type="text" >
<p-dropdown [options]="stages" [(ngModel)]="stage" optionLabel="name"></p-dropdown>
</ng-template>
In the left menu, there is a menu item that triggers this command -
command: (event) => { this.addElement("<Node Label>", "stagebased") }
When you click on the menu item, it calls addElement(label: string, type: string), which adds another TreeNode as a child of the root node. The addElement function looks like this:
addElement(label: string, type: string) {
var node =
{
label: label,
type: type
};
this.selectedNode = this.treeNodes[0];
this.selectedNode.children.push(node);
}
Everything works well so far -- you can add multiple treeNodes with input fields and dropdowns containing the same select options.
https://i.sstatic.net/6PJg8.png
The issue arises when selecting an option in one dropdown, causing the other dropdown to also apply the same selected option. I want to be able to select different options for each dropdown instance.
Can someone help me figure out how to set up the ngModel on p-dropdown to allow for multiple selected 'stage' items?
Thank you