0

我正在按照PrimeNG 官方网站上的这个例子来实现一个非常基本的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[];
}

注意：我已经尝试过这种解决方法，但没有任何改变，浏览器的控制台也没有显示任何错误。

PrimeNG 版本 - 12.1.0，Angular 版本 - 12.2.3，节点版本 - 14.17.0

4

1 回答 1

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

我的堆栈闪电战

这是PrimeNG 12 上工作拖放树的链接，其中包含您的数据和方法getItemsInTreeForm()

于 2021-10-15T08:59:19.423 回答