多个 p 树节点中的 PrimeNg 下拉列表：区分所选选项

Question

我有一个 PrimeNg p-tree

    <p-tree [value]="treeNodes" selectionMode="single" [(selection)]="selectedNode"></p-tree>

TreeNodes用ng-templates表示，其中一个模板如下。

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

左边有一个菜单，其中有一个菜单项带有这个命令-

command: (event) => { this.addElement("<Node Label>", "stagebased") }

所以您单击一个菜单项并调用 addElement(label: string, type: string)，它添加另一个 TreeNode 作为根节点的子节点。添加元素如下：

addElement(label: string, type: string) {
    var node =
    {
      label: label,
      type: type
    };
    this.selectedNode = this.treeNodes[0];
    this.selectedNode.children.push(node);
  }

到目前为止一切正常 -- 您可以多次单击 addElement 以添加多个包含输入字段和下拉列表的树节点，这些节点具有相同的 select 可用选项。

问题是，如果我 select 一个下拉菜单中的选项 - 另一个下拉菜单应用相同的选项 selected。我不能 select 一个下拉实例的不同选项而不是另一个。

如何以允许多个 selected 'stage' 项目的方式在 p-dropdown 上表达 ngModel？

谢谢

Answer 1

部分有或实质上有答案：

诀窍似乎是不使用 [(ngModel)] - 这看起来像是将所有选定的值绑定到一个事物上。相反，使用 onChange 事件：

     <p-dropdown [options]="stages" appendTo="body" (onChange)="onChangeEvent($event.value)" optionLabel="name"></p-dropdown>

类似

 onChangeEvent(stage: Stage) {
    console.log("stage.name = " + stage.name);
  }

因此 onChange $event.value 捕获每个或任何下拉菜单的选定值，而不是将所有下拉菜单的值绑定在一起

Answer 2

您可以将 [(ngModel)] 绑定到数组。每个下拉菜单都需要绑定到一个单独的模型。

所以像这样：

[(ngModel)]="selectedStages[i]"

每个新下拉列表的 i 递增。

您应该可以使用类似下面的方法来增加 i:

<div *ngFor="let x of array; let i = index; trackBy:trackByIndex">
   control here
</div>

trackByIndex(index: number, obj: any): any { return index; }

let x of array 这里就是你的主循环。

多个 p 树节点中的 PrimeNg 下拉列表：区分所选选项

PrimeNg dropdown in multiple p-tree nodes: Differentiating selected options

angular

typescript

primeng

primeng-dropdowns