從樹中刪除選定的節點

Question

我在使用角樹組件（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); 
    }  
    }