PrimeNG

Question

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

代码如下：

.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[];
}

注意：我试过但没有成功，因为没有任何改变，浏览器的控制台也没有显示任何错误。

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)
})

初始化一个属性将被树

操纵的

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

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

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

我的 StackBlitz

这里 link 使用您的数据和方法 link 到 PrimeNG 12 上的工作拖放树 getItemsInTreeForm()

PrimeNG - Tree DragDrop，节点不可拖动

PrimeNG - Tree DragDrop, nodes are not draggable

angular

primeng-tree

提供 TreeDragDropService

初始化一个属性将被树

我的 StackBlitz