在使用递归模板表示的 n 元树中放置元素时，角度拖放不起作用

我对有角度的材料拖放不熟悉。

我的应用程序正在使用 n 叉树，并且由于我不知道它的先验形式，因此我被迫使用递归模板来表示它。

在过去的几天里，我一直在尝试使用 Angular 材质拖放来重新排序兄弟姐妹。如果我删除根节点，一切都会正常工作，但我无法删除根节点，因为我需要它来遍历树以进行其他操作。

波纹管是树的简化形式。实际上，树可以有更多的树枝和叶子，但我想保持简单。

n 叉树的 Json（根节点以及我希望能够拖放的 3 个子节点）：

[
  {
    "orderIndex": 0,
    "id": "5a4f87ce-c52d-4cc1-b587-21898ded5cc0",
    "parentId": "5a4f87ce-c52d-4cc1-b587-21898ded5cc0",
    "name": "Interface1",
    "conditions": "None",
    "text": null,
    "description": "description",
    "children": [
      {
        "orderIndex": 0,
        "id": "5a4f87ce-c527-4cc1-b587-22898ded5cc0",
        "parentId": "5a4f87ce-c52d-4cc1-b587-21898ded5cc0",
        "name": "Interface2",
        "conditions": "None",
        "text": null,
        "description": "description",
        "children": [],
        "errors": null
      },
      {
        "orderIndex": 1,
        "id": "5a4f87ce-c527-4cc8-b587-26898ded5cc0",
        "parentId": "5a4f87ce-c527-4cc8-b587-23898ded5cc0",
        "name": "Interface6",
        "conditions": "None",
        "text": null,
        "description": "description",
        "children": [],
        "errors": null
      },
      {
        "orderIndex": 2,
        "id": "5a4f87ce-c525-4cc1-b587-25898ded5cc0",
        "parentId": "5a4f87ce-c52e-4cc1-b587-24898ded5cc0",
        "name": "Interface4",
        "conditions": "None",
        "text": null,
        "description": "description",
        "children": [],
        "errors": null
      }
    ],
    "errors": null
  }
]

成分：

import { DataService } from './../data.service';
import { Node } from '../_Models/Node';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-vnf-main',
  templateUrl: './vnf-main.component.html',
  styleUrls: ['./vnf-main.component.css']
})
export class VnfMainComponent implements OnInit {
  tree: Node[];

  constructor(private dataService: DataService) {
  }

  ngOnInit() {
    this.dataService.tree$.subscribe(result => {
      this.tree = result;
    });

  drop(event: CdkDragDrop<Node[]>) {
    moveItemInArray(this.tree, event.previousIndex, event.currentIndex);
  }
}

模板代码：

<table>
     <ng-template #recursiveList let-tree>
         <div cdkDropList (cdkDropListDropped)="drop($event)">
             <div *ngFor="let node of tree; let i=index " cdkDrag>
                 <tr>
                    <app-default-node [node]="node"></app-default-node>
                    <td *ngIf="node.children!==null && node.children.length > 0" cdkDrag>
                        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: node.children }"></ng-container>
                    </td>
                 </tr>
             </div>
         </div>
     </ng-template>
</table>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: tree }"></ng-container>

另外：我如何知道被拖动的节点以及它被删除的节点？我无法在任何地方找到答案，但如果我能得到这两个答案，我也许可以通过遍历树并手工完成所有事情来解决它。

预先感谢您到目前为止并阅读整个问题。

万一有些人遇到同样的问题...我通过使用将节点拖动到 drop 方法解决了这个问题[cdkDragData]=节点因为 cdk 拖放是为列表而不是 n 叉树设计的。

<div [cdkDragData]=node *ngFor="let node of tree; let i=index " cdkDrag>

然后，在方法内部，可以遍历树并“手动”进行更改：

const movedNode: Node = event.item.data; //Node that was dragged
const parentNode: Node = this.dataService.findNode(movedNode.parentId, this.tree[0]); //parent of the dragged node
moveItemInArray(parentNode.children, event.previousIndex, event.currentIndex); //move the node as in any other cdk drag and drop list

感谢我收到的答案，它真的鼓励我找到最好的解决方案????