Angular TreeView

Question

你好，

我正在使用Angular 4，可能你現在可以叫我新手了。 我在谷歌搜索樹的意見，發現兩個相當不錯的框架。 First和NG2樹（無法張貼鏈接，沒有足夠的聲譽;（） 但是他們兩個我有問題，創建新的節點

在第一個添加方法通常是寫的，但我。不知道如何將節點添加到樹的選定部分

第二個添加方法寫在某種程度上是奇怪的，我不知道如何解決它當添加節點它添加視覺，但它不'添加數組（或讓我們調用它的樹）我曾嘗試對添加方法執行push（），但我無法獲得與樹數組相同的對象，然後，當我試圖將其導入到firebase作爲JSON它給我一個錯誤。

這個是ng2-treeview。我試圖與工作方法onNodeCreated（）

import { Component, Input, ViewEncapsulation, OnInit } from '@angular/core'; 
import { NodeEvent, TreeModel, RenamableNode, Ng2TreeSettings } from 'ng2-tree'; 
import { ServerService } from "app/pages/components/components/treeView/storeService.service"; 
import alertify from 'alertify.js'; 
import { Http, Response } from "@angular/http"; 
declare const alertify: any; 
@Component({ 
    selector: 'tree-view', 
    styleUrls: ['treeView.css'], 
    templateUrl: 'treeView.html', 
    providers: [ServerService], 
    encapsulation: ViewEncapsulation.None 
}) 

export class TreeView implements OnInit { 
    constructor(private serverService: ServerService, private http: Http /*private treeview: TreeModel*/){ 
    } 
    tree: TreeModel = { 
    value: 'Programming languages by programming paradigm', 
    children: [ 
     { 
     value: 'Object-oriented programming', 
     children: [ 
      { 
      // I am a RenamableNode. Yeah, that's me :) 
      value: <RenamableNode>{ 
       name: 'Java', 
       setName(name: string): void { 
       this.name = name; 
       }, 
       toString(): string { 
       return this.name; 
       } 
      } 
      }, 
      {value: 'C++'} 
     ] 
     }, 
     { 
     value: 'Prototype-based programming', 
     settings: { 
      'static': true 
     }, 
     loadChildren: (callback) => { 
      setTimeout(() => { 
      callback([ 
       {value: 'JavaScript'}, 
       {value: 'CoffeeScript'}, 
       {value: 'TypeScript'} 
      ]); 
      }, 5000); 
     } 
     } 
    ] 
    }; 

    ngOnInit(){ 
     this.http.get('https://testing-angular-50890.firebaseio.com/data.json').map(
      (response: Response) => { 
       const data = response.json(); 
       this.tree = data; 
      } 
     ); 
    } 
    private static logEvent(e: NodeEvent, message: string): void { 
     console.log(e); 
     alertify.logPosition("top right"); 
     if((message==="Moved") || (message==="Renamed") || (message==="Created") || (message==="Selected")){ 
      alertify.success(`${message}: ${e.node.value}`); 
     } 
     else{ 
      alertify.error(`${message}: ${e.node.value}`); 
     } 

    } 
    public onNodeRemoved(e: NodeEvent): void { 
     TreeView.logEvent(e, 'Removed'); 
     this.http.put('https://testing-angular-50890.firebaseio.com/data.json', this.tree).subscribe(
      (response) => console.log(response), 
      (error) => console.log(error) 
     ); 
    } 

    public onNodeMoved(e: NodeEvent): void { 
     TreeView.logEvent(e, 'Moved'); 
     this.http.put('https://testing-angular-50890.firebaseio.com/data.json', this.tree).subscribe(
      (response) => console.log(response), 
      (error) => console.log(error) 
     ); 
    } 

    public onNodeRenamed(e: NodeEvent): void { 
     TreeView.logEvent(e, 'Renamed'); 
     this.http.put('https://testing-angular-50890.firebaseio.com/data.json', this.tree).subscribe(
      (response) => console.log(response), 
      (error) => console.log(error) 
     ); 
    } 

    public onNodeCreated(e: NodeEvent): void { 
     TreeView.logEvent(e, 'Created'); 
     console.log(e); 
     this.tree.children.push(e.node); 
     console.log(this.tree); 
     this.http.put('https://testing-angular-50890.firebaseio.com/data.json', this.tree).subscribe(
      (response) => console.log(response), 
      (error) => console.log(error) 
     ); 
    } 

    public onNodeSelected(e: NodeEvent): void { 
     this.http.put('https://testing-angular-50890.firebaseio.com/data.json', this.tree).subscribe(
      (response) => console.log(response), 
      (error) => console.log(error) 
     ); 
     TreeView.logEvent(e, 'Selected'); 
     console.log(this.tree.children); 
    } 
} 

錯誤消息 This is the error with adding, which I mentioned above

**這是另外一個，不給任何錯誤，我只是不不知道如何在這裏開發添加方法。就像，我要在選定的節點添加節點，但在這個例子中它只需添加一個處（硬編碼）節點**

import { Component, Input } from '@angular/core'; 
import { TreeNode, TreeModel, TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component'; 

const actionMapping:IActionMapping = { 
    mouse: { 
    contextMenu: (tree, node, $event) => { 
     $event.preventDefault(); 
     alert(`context menu for ${node.data.name}`); 
    }, 
    dblClick: (tree, node, $event) => { 
     if (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event); 
    }, 
    click: (tree, node, $event) => { 
     $event.shiftKey 
     ? TREE_ACTIONS.TOGGLE_SELECTED_MULTI(tree, node, $event) 
     : TREE_ACTIONS.TOGGLE_SELECTED(tree, node, $event) 
    } 
    }, 
    keys: { 
    [KEYS.ENTER]: (tree, node, $event) => alert(`This is ${node.data.name}`) 
    } 
}; 

@Component({ 
    selector: 'app-fulltree', 
    styles: [ 
    `button: { 
     line - height: 24px; 
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); 
     border: none; 
     border-radius: 2px; 
     background: #A3D9F5; 
     cursor: pointer; 
     margin: 0 3px; 
     }` 
    ], 
    template: ` 
    <form> 
    <input #filter (keyup)="filterNodes(filter.value, tree)" placeholder="filter nodes"/> 
    </form> 
    <div style="height: 400px; width: 300px"> 
    <tree-root 
     #tree 
     [nodes]="nodes" 
     [options]="customTemplateStringOptions" 
     [focused]="true" 
     (event)="onEvent($event)" 
     (initialized)="onInitialized(tree)" 

    > 
     <ng-template #treeNodeTemplate let-node> 
     <span title="{{node.data.subTitle}}">{{ node.data.name }}</span> 
     <span class="pull-right">{{ childrenCount(node) }}</span> 
     <button (click)="go($event)">Custom Action</button> 
     </ng-template> 
     <ng-template #loadingTemplate>Loading, please hold....</ng-template> 
    </tree-root> 
    </div> 
    <br> 
    <p>Keys:</p> 
    down | up | left | right | space | enter 
    <p>Mouse:</p> 
    click to select | shift+click to select multi 
    <p>API:</p> 
    <button (click)="tree.treeModel.focusNextNode()">next node</button> 
    <button (click)="tree.treeModel.focusPreviousNode()">previous node</button> 
    <button (click)="tree.treeModel.focusDrillDown()">drill down</button> 
    <button (click)="tree.treeModel.focusDrillUp()">drill up</button> 
    <button (click)="customTemplateStringOptions.allowDrag = true">allowDrag</button> 
    <p></p> 
    <button 
    [disabled]="!tree.treeModel.getFocusedNode()" 
    (click)="tree.treeModel.getFocusedNode().toggleActivated()"> 
    {{ tree.treeModel.getFocusedNode()?.isActive ? 'deactivate' : 'activate' }} 
    </button> 
    <button 
    [disabled]="!tree.treeModel.getFocusedNode()" 
    (click)="tree.treeModel.getFocusedNode().toggleExpanded()"> 
    {{ tree.treeModel.getFocusedNode()?.isExpanded ? 'collapse' : 'expand' }} 
    </button> 
    <button 
    [disabled]="!tree.treeModel.getFocusedNode()" 
    (click)="tree.treeModel.getFocusedNode().blur()"> 
    blur 
    </button> 
    <button 
    (click)="addNode(tree)"> 
    Add Node 
    </button> 
    <button 
    (click)="activateSubSub(tree)"> 
    Activate inner node 
    </button> 
    <button 
    (click)="tree.treeModel.expandAll()"> 
    Expand All 
    </button> 
    <button 
    (click)="tree.treeModel.collapseAll()"> 
    Collapse All 
    </button> 
    <button 
    (click)="activeNodes(tree.treeModel)"> 
    getActiveNodes() 
    </button> 
    ` 
}) 
export class FullTreeComponent { 
    nodes: any[]; 
    nodes2 = [{name: 'root'}, {name: 'root2'}]; 
    constructor() { 
    } 
    ngOnInit() { 
    setTimeout(() => { 
     this.nodes = [ 
     { 
      expanded: true, 
      name: 'root expanded', 
      subTitle: 'the root', 
      children: [ 
      { 
       name: 'child1', 
       subTitle: 'a good child', 
       hasChildren: false 
      }, { 
       name: 'child2', 
       subTitle: 'a bad child', 
       hasChildren: false 
      } 
      ] 
     }, 
     { 
      name: 'root2', 
      subTitle: 'the second root', 
      children: [ 
      { 
       name: 'child2.1', 
       subTitle: 'new and improved', 
       uuid: '11', 
       hasChildren: false 
      }, { 
       name: 'child2.2', 
       subTitle: 'new and improved2', 
       children: [ 
       { 
        uuid: 1001, 
        name: 'subsub', 
        subTitle: 'subsub', 
        hasChildren: false 
       } 
       ] 
      } 
      ] 
     }, 
     { 
      name: 'asyncroot', 
      hasChildren: true 
     } 
     ]; 

     for(let i = 0; i < 4; i++) { 
     this.nodes.push({ 
      name: `rootDynamic${i}`, 
      subTitle: `root created dynamically ${i}`, 
      children: new Array((i + 1) * 100).fill(null).map((item, n) => ({ 
      name: `childDynamic${i}.${n}`, 
      subTitle: `child created dynamically ${i}`, 
      hasChildren: false 
      })) 
     }); 
     } 
    }, 1); 
    } 

    asyncChildren = [ 
    { 
     name: 'child2.1', 
     subTitle: 'new and improved' 
    }, { 
     name: 'child2.2', 
     subTitle: 'new and improved2' 
    } 
    ]; 

    getChildren(node:any) { 
    return new Promise((resolve, reject) => { 
     setTimeout(() => resolve(this.asyncChildren.map((c) => { 
     return Object.assign({}, c, { 
      hasChildren: node.level < 5 
     }); 
     })), 1000); 
    }); 
    } 

    addNode(tree) { 
    this.nodes[0].children.push({ 

     name: 'a new child' 
    }); 
    tree.treeModel.update(); 
    } 

    childrenCount(node: TreeNode): string { 
    return node && node.children ? `(${node.children.length})` : ''; 
    } 

    filterNodes(text, tree) { 
    tree.treeModel.filterNodes(text); 
    } 

    activateSubSub(tree) { 
    // tree.treeModel.getNodeBy((node) => node.data.name === 'subsub') 
    tree.treeModel.getNodeById(1001) 
     .setActiveAndVisible(); 
    } 

    customTemplateStringOptions: ITreeOptions = { 
    // displayField: 'subTitle', 
    isExpandedField: 'expanded', 
    idField: 'uuid', 
    getChildren: this.getChildren.bind(this), 
    actionMapping, 
    nodeHeight: 23, 
    allowDrag: (node) => { 
     // console.log('allowDrag?'); 
     return true; 
    }, 
    allowDrop: (node) => { 
     // console.log('allowDrop?'); 
     return true; 
    }, 
    useVirtualScroll: true, 
    animateExpand: true, 
    animateSpeed: 30, 
    animateAcceleration: 1.2 
    } 
    onEvent(event) { 
    console.log(event); 
    } 

    onInitialized(tree) { 
    // tree.treeModel.getNodeById('11').setActiveAndVisible(); 
    } 

    go($event) { 
    $event.stopPropagation(); 
    alert('this method is on the app component'); 
    } 

    activeNodes(treeModel) { 
    console.log(treeModel.activeNodes); 
    } 
} 

Answer 1

試試這個https://www.primefaces.org/primeng/#/tree或this .....

Answer 2

您可以結帳該組件：Overview of IntegralUI TreeView for Angular 2。

有幾種公共方法可供您按需添加項目。