PrimeNG - Tree DragDrop，节点不可拖动

Question

我正在关注PrimeNG官方网站的this example来实现一个非常基本的DragDrop Tree（我只需要重新排序功能，所有节点都是叶子没有孩子）。树（动态构建）构建成功，但是显示的节点不可拖动，所以我无法上下移动它们。下图

代码如下：

.html 文件

 <p-tree [value]="getItemsInTreeForm()" [draggableNodes]="true" [droppableNodes]="true"
        draggableScope="self" droppableScope="self">

 </p-tree>

.ts 文件

public getItemsInTreeForm(): TreeNode[] {
 
  let items = [{
  label: "Item1",
  data: "Backup Folder",
  expandedIcon: "pi pi-folder-open",
  collapsedIcon: "pi pi-folder"
},
  {
    label: "Item2",
    data: "Backup Folder2",
    expandedIcon: "pi pi-folder-open",
    collapsedIcon: "pi pi-folder"
  },
  {
    label: "Item3",
    data: "Backup Folder3",
    expandedIcon: "pi pi-folder-open",
    collapsedIcon: "pi pi-folder"
  }
]
return items as TreeNode[];
}

注意：我尝试了this workaround，但没有任何改变，浏览器控制台也没有显示任何错误。

PrimeNG 版本 - 12.1.0、Angular 版本 - 12.2.3、Node 版本 - 14.17.0

Answer 1

提供 TreeDragDropService

您需要提供TreeDragDropService

例如：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [TreeDragDropService], // Without it, it does not work (drag & drop)
})

初始化将由树操作的属性

你需要有一个合适的变量来支持你的树（不仅仅是你的函数返回）

使用getItemsInTreeForm() 的结果初始化组件的属性，然后将其传递给模板。

在文档中看到他们没有直接传递getFiles() 的结果，而是采用中间变量来支持树： this.nodeService.getFiles().then(files => this.files1 = files);

我的 StackBlitz

在此将link 与您的数据和方法getItemsInTreeForm() 放在 PrimeNG 12 上的工作拖放树中@