在使用遞歸模板表示的 n 元樹中放置元素時，角度拖放不起作用

Question

我是角度材料拖放的新手。

我的應用程序使用 n 元樹，由於我不知道它的先驗形式，我不得不使用遞歸模板來表示它。

最近幾天我一直在嘗試使用 Angular 材料拖放來重新排序兄弟姐妹。 如果我刪除根節點，一切正常，但我無法刪除根節點，因為我需要它來遍歷樹以進行其他操作。

Bellow 是樹的簡化形式。 實際上，樹可以有更多的樹枝和樹葉，但我想保持簡單。

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>

另外：我怎么知道被拖動的節點和它被拖放的節點？ 我無法在任何地方找到答案，但如果我能得到這兩個答案，我也許可以通過遍歷樹並手動完成所有操作來解決它。

在此先感謝您並閱讀了整個問題。

Answer 1

如果有些人遇到同樣的問題......我解決了這個問題，通過使用[cdkDragData]=node將節點拖動到 drop 方法，因為 cdk 拖放是為列表設計的，而不是 n-ary 樹。

<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

感謝我收到的答案，這真的鼓勵我找到最佳解決方案😊