具有拖放功能的角垫树答案

【问题标题】：Angular mat tree with drag and drop具有拖放功能的角垫树
【发布时间】：2020-01-12 04:01:28
【问题描述】：

我将 angular material flat tree 用于 drag and drop。

我使用来自 stackblitz link 的示例实现了 drag and drop。

当我将父节点拖放到子节点时出现错误。

这是错误Cannot read property 'findIndex' of undefined

Instead of showing that error i want to disable the action of DND of parent to child.

到目前为止，这是我的 work。提前致谢。

【问题讨论】：

我无法重现该问题。你能告诉我更多吗？
@JSmith，请尝试将父节点拖放到子节点，然后再尝试一次会出错。我更新了我的演示。另请查看我们的聊天室。提前致谢。
请添加详细的过程以重现错误
我看到你已经实现了我的方法我只是在显示中看到了一些错误并且不知道这是来自我的算法还是 DND 过程。目前我唯一的问题是ERROR TypeError: "siblings is undefined"
@zerocewl 将父级放入子级时，暂时不会显示错误。该错误将在下一次免打扰操作中显示。

标签： angular angular-material2 angular-dragdrop angular-tree-component

【解决方案1】：

我刚刚复制并粘贴了您提供的示例的drop() 代码，并且它有效。不确定你的问题来自哪里，但你仍然可以尝试删除你的函数并添加它：

// recursive find function to find siblings of node
findNodeSiblings(arr: Array<any>, id: string): Array<any> {
  let result, subResult;
  arr.forEach(item => {
    if (item.id === id) {
      result = arr;
    } else if (item.children) {
      subResult = this.findNodeSiblings(item.children, id);
      if (subResult) result = subResult;
    }
  });
  return result;
}

  drop(event: CdkDragDrop<string[]>) {
    if (!event.isPointerOverContainer) return;
    const visibleNodes = this.visibleNodes();
    const changedData = JSON.parse(JSON.stringify(this.dataSource.data));
    const node = event.item.data;
    const siblings = this.findNodeSiblings(changedData, node.id);
    const siblingIndex = siblings.findIndex(n => n.id === node.id);
    const nodeToInsert: PARENTNODE|CHILDNODE = siblings.splice(siblingIndex, 1)[0];
    const nodeAtDest = visibleNodes[event.currentIndex];
    if (nodeAtDest.id === nodeToInsert.id) return;
    let relativeIndex = event.currentIndex; // default if no parent
    const nodeAtDestFlatNode = this.treeControl.dataNodes.find(n => nodeAtDest.id === n.id);
    const parent = this.getParentNode(nodeAtDestFlatNode);
    if (parent) {
      const parentIndex = visibleNodes.findIndex(n => n.id === parent.id) + 1;
      relativeIndex = event.currentIndex - parentIndex;
    }
    const newSiblings = this.findNodeSiblings(changedData, nodeAtDest.id);
    if (!newSiblings) return;
    newSiblings.splice(relativeIndex, 0, nodeToInsert);
    this.rebuildTreeForData(changedData);
  }

这并不能真正回答您最初的问题来自哪里，但我仍然建议您充分理解这段代码，因为它看起来正在运行。如果您想添加更多选项，请从头开始。

【讨论】：