從樹中刪除選定的節點

Question

我正在使用angular-tree-component（ https://angular2-tree.readme.io ）在Angular2應用程序中顯示一棵樹。

我需要使用戶能夠選擇樹中的任何節點並將其刪除。 這應該刪除選定的節點及其所有子節點（如果是葉節點，則只是該節點）。 用戶完成后，修剪后的樹將發送到服務器並保存在服務器中。

在下面的示例中，用戶選擇“節點1-2”，然后單擊“刪除”。 這將從視圖和已更新的底層Javascript對象中刪除“節點1-2，節點1”和“節點2”。 然后，用戶可以單擊另一個按鈕（例如，保存）以將更新的對象保存在服務器上。

為了做到這一點，我編寫了以下代碼，單擊“刪除”按鈕即可調用該代碼。 我存儲選定節點的ID，然后遍歷整個樹以找到該ID。 當id匹配時，我使用'delete'關鍵字刪除'id'和'text'。 但是，“刪除兒童”無效。

deleteSelectedNode() { 
    //Get the node which was selected by the user  
    let nodeToDelete: TreeNode = this.myService.getActiveNode();
    //id will be unique, can be used to identify the node
    let idToDelete = nodeToDelete.data.id; 
    this.traverseTree(this.nodes[0], idToDelete);
  }

  traverseTree(obj, idToDelete: string) {

    for (var k in obj) {
      if (typeof obj[k] == "object" && obj[k] !== null) {
        this.traverseTree(obj[k], idToDelete);
      }

      else {
        if (k === 'id') {
          let id = obj[k];
          if (id === idToDelete) {
            console.log('ID Matched ' + id);
            delete obj['id'];
            delete obj['text'];
            delete obj['children']; 
            break;
          }
        } 
      }
    }
  }

下面是呈現樹的JSON。

{
        "children": [
            {
                "children": [
                    {
                        "text": "Node 1",
                        "id": "A493"
                    },
                    {
                        "text": "Node 2",
                        "id": "A494"
                    }
                ],
                "text": "Node 1-2",
                "id": "A491"
            },
            {
                "children": [
                    {
                        "children": [
                            {
                                "text": "Node 3",
                                "id": "A5ab"
                            },
                            {
                                "text": "Node 4",
                                "id": "A5ac"
                            },
                            {
                                "text": "Node 5",
                                "id": "A5ad"
                            },
                            {
                                "text": "Node 6",
                                "id": "A5ae"
                            },
                            {
                                "text": "Node 7",
                                "id": "A5af"
                            },
                            {
                                "text": "Node 8",
                                "id": "A5b0"
                            },
                            {
                                "text": "Node 9",
                                "id": "A5b1"
                            },
                            {
                                "text": "Node 10",
                                "id": "A5b2"
                            },
                            {
                                "text": "Node 11",
                                "id": "A5b3"
                            },
                            {
                                "text": "Node 12",
                                "id": "A5b4"
                            },
                            {
                                "text": "Node 13",
                                "id": "A6da"
                            },
                            {
                                "text": "Node 14",
                                "id": "A6db"
                            }
                        ],
                        "text": "Node 1-14",
                        "id": "A495"
                    },
                    {
                        "children": [
                            {
                                "text": "Node 15",
                                "id": "A6dc"
                            },
                            {
                                "text": "Node 16",
                                "id": "A6dd"
                            },
                            {
                                "text": "Node 17",
                                "id": "A6de"
                            },
                            {
                                "text": "Node 18",
                                "id": "A6df"
                            },
                            {
                                "text": "Node 19",
                                "id": "A6e0"
                            },
                            {
                                "text": "Node 20",
                                "id": "A6e1"
                            },
                            {
                                "text": "Node 21",
                                "id": "A6e2"
                            },
                            {
                                "text": "Node 22",
                                "id": "A6e3"
                            }
                        ],
                        "text": "Node 15-22",
                        "id": "A496"
                    },
                    {
                        "text": "Node 23",
                        "id": "A497"
                    },
                    {
                        "text": "Node 24",
                        "id": "A498"
                    }
                ],
                "text": "Node 23-24",
                "id": "A492"
            }
        ],
        "text": "Node 1-24",
        "id": "A490"
    }

如何刪除整個節點，包括子節點？ 另外，有沒有更好的方法可以做到這一點？

Answer 1

您可以通過父級引用輕松完成

deleteNode() {
    let nodeToDelete: TreeNode = this.tree.treeModel.getActiveNode();
    if (nodeToDelete.level === 1) {
      this.nodes = this.nodes.filter((n) => n.id !== nodeToDelete.id);
    } else {
      nodeToDelete.parent.children = nodeToDelete.parent.children.filter((n) => n.id !== nodeToDelete.id);
    }    
  }