Draggle 嵌套结构 - Angular

问：

我正在尝试使用 cdk 拖放和 flattree 来实现嵌套结构的拖放逻辑，但它太复杂了。拖放不起作用，当我放下它时，我拖动了 elelment 没有转到新的位置 - 兄弟姐妹 [] 兄弟姐妹索引 -1 nodeToInsert 未定义。我只是不明白为什么？ 这是我的数据结构

export interface AdvancedMenusItems {
  id: number;
  menu: number;
  url: string | null;
  level: number;
  sort: number;
  type: string;
  value: number;
  createdAt: string;
  updatedAt: string;
  AdvancedMenusItemsI18Ns: MenuItemI18N[];
  children: AdvancedMenusItems[];
  expandable: boolean;
}

在这里，我正在实现拖放drop（event： CdkDragDrop<AdvancedMenusItems[]>） { 忽略树外的液滴 if （！event.isPointerOverContainer） 返回;

// construct a list of visible nodes, this will match the DOM.
const visibleNodes = this.visibleNodes();

// deep clone the data source so we can mutate it
const changedData = JSON.parse(JSON.stringify(this.dataSource.data));
console.log('ChangeData', changedData);
// recursive find function to find siblings of node
function findNodeSiblings(
  arr: AdvancedMenusItems[],
  id: number,
): AdvancedMenusItems[] {
  let result, subResult;

  arr.forEach((item) => {
    if (item.id === id) {
      console.log('Matched ID:', item.id);
      result = arr;
    } else if (item.children) {
      subResult = findNodeSiblings(item.children, id);
      if (subResult) {
        result = subResult;
      }
    }
  });

  console.log('Result for ID:', id, result);
  return result || [];
}

// determine where to insert the node
const nodeAtDest = visibleNodes[event.currentIndex];
console.log('nodeAtDest', nodeAtDest);
const newSiblings = findNodeSiblings(changedData, nodeAtDest.id);
console.log('newSiblings', newSiblings);
if (!newSiblings) return;
const insertIndex = newSiblings.indexOf(nodeAtDest);
console.log('insertIndex', insertIndex);

// remove the node from its old place
const node = event.item.data;
console.log('node', node);
const siblings = findNodeSiblings(changedData, node.id);
console.log('siblings', siblings);
const siblingIndex = siblings.findIndex((n) => n.id === node.id);
console.log('siblingIndex', siblingIndex);
const nodeToInsert: AdvancedMenusItems = siblings.splice(
  siblingIndex,
  1,
)[0];
console.log('nodeToInsert', nodeToInsert);

// insert node
newSiblings.splice(insertIndex, 0, nodeToInsert);

// rebuild tree with mutated data
this.rebuildTreeForData(changedData);

// Log the data after rebuilding the tree
console.log('Rebuilt Data', this.dataSource.data);

}

visibleNodes(): AdvancedMenusItems[] {
    const result: AdvancedMenusItems[] = [];
    // This helper function adds a node and its expanded children to the result array.
    function addExpandedChildren(node: AdvancedMenusItems, expanded: number[]) {
      result.push(node);
      if (expanded.includes(node.id)) {
        node.children.map((child) => addExpandedChildren(child, expanded));
      }
    }
    this.dataSource.data.forEach((node) => {
      addExpandedChildren(node, this.expansionModel.selected.map(Number));
    });
    return result;
  }
  // rebuild the tree with the new order of the items
  rebuildTreeForData(data: any) {
    this.dataSource.data = data;
    this.expansionModel.selected.forEach((id) => {
      const node = this.treeControl.dataNodes.find(
        (n) => n.id.toString() === id,
      );
      if (node) {
        this.treeControl.expand(node);
      }
    });
  }```

Check for Pointer Over Container

Check if the drop event occurred over a valid drop container. If not, exit the function early.
Construct Visible Nodes List

Generate a list of visible nodes based on the current state of the tree.
Deep Clone Data Source

Create a deep clone of your data source to prevent direct mutation.
Define Find Node Siblings Function

Define a recursive function that searches for siblings of a node with a specific ID within a nested array structure.
Determine Insert Position

Determine the position where the dragged node should be inserted. This is done by finding the node at the destination index in the list of visible nodes and then finding its siblings in the deep-cloned data source.
Remove Node from Old Position

Find the dragged node and its siblings in the deep-cloned data source. Remove the node from its old position within its siblings.
Insert Node at New Position

Insert the dragged node at the new position within its new siblings.
Rebuild Tree with Mutated Data

Update the tree with the mutated data source and ensure all previously expanded nodes remain expanded.
Log Updated Data Source

Log the data source after the tree has been rebuilt to verify the changes.
The steps for the visibleNodes function are:

Initialize Result Array
Initialize an empty array to hold the result.
Define Helper Function
Define a helper function that adds a node and its expanded children to the result array.
Populate Result Array
Iterate over the data source and use the helper function to add each node and its expanded children to the result array.
The steps for the rebuildTreeForData function are:

Update Data Source
Update the tree's data source with the new data.
Expand Previously Expanded Nodes


I debbugged in th browser and  i put 50 console logs i think the problem is somwehere in the function