PrimeNg p-tree多节点内嵌p-dropdown选中值联动问题求解

问题原因 #

你当前所有<p-dropdown>的ngModel绑定的是组件全局的stage属性，所有生成的树节点共用这同一个变量存储选中值，修改任意下拉框都会修改这个全局变量，因此所有下拉框会同步变化。

解决方案 #

把下拉框的选中值存储到每个独立的TreeNode节点自身的属性上即可，修改两处代码：

1. 修改addElement方法，给新增的节点添加存储当前节点下拉选中值的专属属性，示例如下：

addElement(label: string, type: string) {
    var node =
    {
      label: label,
      type: type,
      selectedStage: null // 新增属性，用来存当前节点对应的下拉选中值，也可以设为你需要的默认值
    };
    this.selectedNode = this.treeNodes[0];
    this.selectedNode.children.push(node);
}

2. 修改ng-template里p-dropdown的ngModel绑定，指向当前节点自身的selectedStage属性：

<ng-template let-node pTemplate="stagebased" >
    <input [(ngModel)]="node.label" type="text"  >
    <p-dropdown [options]="stages"  [(ngModel)]="node.selectedStage"  optionLabel="name"></p-dropdown>
</ng-template>

修改完成后每个节点的下拉选中值会独立存储在自身属性中，不会互相影响。

内容的提问来源于stack exchange，提问作者anvw