primengツリーコンポーネントを初期化する方法

Question

treeノードを自由に拡張するように初期化する方法を教えてください。

私はすでに@ViewChildren(Tree) treeでの参照を取得しようとしましたが、これは基本的に木に沿ってクリックをシミュレートハックです自分の子供たちへのアクセスに

Answer 1

をしようとしたときundefinedの参照が得られています。私はこの解決法を追加しますが、誰かが何か良いものを見つけることができれば幸いです。あなたが巣にする必要がありますツリーの深いノードを初期化する必要がある場合には

@Component({ 
    selector: 'filemanager', 
    templateUrl: './filemanager.html', 
    directives: [Tree] 
}) 
export class FileManagerComponent implements AfterViewInit { 

    constructor(private renderer:Renderer) {}  

    ngAfterViewInit() { 
     setTimeout(() => { // a timeout is necessary otherwise won't find the elements 

      // get the first "p-tree" tag and find his first "toggler" 
      let element = document.getElementsByTagName("p-tree")[0].getElementsByClassName("ui-tree-toggler fa fa-fw fa-caret-right")[0]; 

      //"click" the toggler using the angular2 renderer 
      let event = new MouseEvent('click', {bubbles: true}); 
      this.renderer.invokeElementMethod(element, 'dispatchEvent', [event]); 
     }, 200); 
    } 

    // more methods and state... 
} 

：我々はtreenodesへの参照を取得し、その後、必要に応じてそれらを「クリック」することができますtreeでコンポーネントを考えると

setTimeout機能。

Answer 2

ツリーコンポーネントを初期化するには、json形式でプロパティをtrueに設定する必要があります。

サンプル：

{ 
    "data": 
    [ 
     { 
      "label": "Pictures", 
      "data": "Pictures Folder", 
      "expandedIcon": "fa-folder-open", 
      "collapsedIcon": "fa-folder", 
      "expanded": true, // this flag shoud be true 
      "children": [ 
       {"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"}, 
       {"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"}, 
       {"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}] 
     }, 
    ] 
} 

Answer 3

あなたはtrueにすべての拡張された属性を置く機能でこれを処理することができます。

expandAll(toggle: boolean) { 
    this.tree.map(node => { 
    node.expanded = toggle; 
    }); 
} 

ngOnInit() { 
    setTimeout(()=>{ 
    this.expandAll(true); 
    }, 0); 

}