过滤时如何从 PrimeNg 树组件中删除节点

Question

您好，我在过滤时从树中拖放时遇到问题。 当我在不过滤时尝试拖放时，该项目会从右侧树中删除，但当我过滤时，它不会删除。

This is a video showing the problem

<p-tree [value]="data" [draggableNodes]="true" [droppableNodes]="true" [filter]="true" filterBy="label">
  <ng-template let-node pTemplate="default">
    <div>{{node['label']}}</div>
  </ng-template>
</p-tree>
<p-tree [value]="_target" [draggableNodes]="true" [droppableNodes]="true" [filter]="true" filterBy="label">
  <ng-template let-node pTemplate="default">
    <div>{{node['label']}}</div>
  </ng-template>
</p-tree>

Answer 1

您需要为 TreeNode 数组（在您的情况下为“数据”）中的所有项目（节点）添加唯一键。如果没有键，Tree 组件无法在过滤树的节点上触发事件。 在您的情况下，只需将节点的名称复制到 node.key 字段就足够了。

https://www.primefaces.org/primeng/#/tree 的官方文档以某种方式避开了这一点 - 他们在没有适当解释的情况下提供了指向 github (https://github.com/primefaces/primeng/issues/7237#issue-409791407) 的链接。