"初始化"在加载数据之前调用angular2-tree-component的事件 [英] "initialized" event of angular2-tree-component is called before loading data

问题描述

我正在使用

我正在加载 ngOnInit（）数据：

  ngOnInit（）{
 this.getApiFunction（request，item）
 .subscribe（x => {
 console.log （'调整数据'之前）; 
 this.adjustDataToTree（x）; 
 console.log（'调整数据后'）; 
}）; 
 
 
 
 adjustDataToTree（reports：any []）{
 //一些循环为treeView 
处理（...）{ ...} 
 this.Items.length = 0; 
 this.Items =来自上面循环的数据; 
} 
  

处理初始化的代码 event：

  onTreeLoad（）{
 // alert（'Tree Load'）; 
 this.tree.treeModel.expandAll（）; 
 console.log（'this.tree.treeModel.expandAll（）is called！:)'）; 
 
  

我的树看起来像这样：

 < tree-root（initialized）=onTreeLoad（）[nodes] =Items
 [options] =customTemplateStringOptions＃tree> 
< ng-template class =expand-tree#treeNodeTemplate let-node> 
< span（click）=currToggleExpanded（node）* ngIf =node？.data？.expanded === true
 title ={{node.data.subTitle}} > {{node.data.name}} {{childrenCount（node）}} 
< / span> 
< span（click）=currToggleExpanded（node）ngIf =！node？.data？.expanded === true
 title ={{node.data.subTitle}} > {{node.data.name}} {{childrenCount（node）}} 
< / span> 
< / ng-template> 
< / tree-root> 
  

已初始化 。它可以通过日志的顺序看出：

那么我在做什么错误，或者为什么初始化事件在数据加载到 treeview ？之前被触发？

解决方案

尝试将ngIf添加到您的树中，以便在数据准备就绪之前不会呈现。

 < tree-root * ngIf =Items（initialized）=onTreeLoad（$ event）[nodes] =Items
 ...> 
 ... 
< / tree-root> 
  

并通过初始化的方法传递树对象 onTreeLoad（$ event ）并使用传入的值。这部分可能不一定需要， this.tree 应该是同一个对象。

  onTreeLoad（tree）：void {
 tree.treeModel.expandAll（）; 
} 
  

I am using angular2-tree-component and want to show already expanded tree. Angular docs says to use initialized event for expanding tree after data is come to tree:

Triggers after tree model was created. Good for performing actions immediately on init, like expanding / activating certain nodes, etc. You can access the tree model using a ref, as described in the API section.

But tree is not expanded after rendered:

I am loading data on ngOnInit():

ngOnInit() {
    this.getApiFunction(request, item)
        .subscribe(x => {    
            console.log('before adjusting data');            
            this.adjustDataToTree(x);            
            console.log('after adjusting data');                
        });
}


adjustDataToTree(reports:any[]){        
    //some cycle to handle data for treeView
    for(...){...}
    this.Items.length = 0;
    this.Items = data from above cycle;        
}

code to handle initialized event:

onTreeLoad(){
    //alert('on Tree Load');
    this.tree.treeModel.expandAll();
    console.log('this.tree.treeModel.expandAll() is called!:)');        
}

My tree looks like this:

<tree-root (initialized)="onTreeLoad()" [nodes]="Items"  
    [options]="customTemplateStringOptions" #tree>        
    <ng-template class="expand-tree" #treeNodeTemplate let-node>
        <span (click)="currToggleExpanded(node)" *ngIf="node?.data?.expanded === true" 
            title="{{node.data.subTitle}}">{{ node.data.name }} {{ childrenCount(node) }} 
        </span>
        <span (click)="currToggleExpanded(node)" ngIf="!node?.data?.expanded === true" 
             title="{{node.data.subTitle}}">{{ node.data.name }} {{ childrenCount(node) }}
        </span>
    </ng-template>
</tree-root>

initialized event is fired before data is loaded. It can be seen by order of logs:

So what am I doing wrong or why initialized event is fired before data is loaded into treeview?

解决方案

Try adding an ngIf to your tree so it does not render until the data is ready

<tree-root *ngIf="Items" (initialized)="onTreeLoad($event)" [nodes]="Items"  
...>
    ...
</tree-root>

And also pass in the tree object through your initialized method onTreeLoad($event) and use that passed in value. This part may not necessarily be needed, this.tree should be the same object.

onTreeLoad(tree): void {
    tree.treeModel.expandAll();
}

这篇关于"初始化"在加载数据之前调用angular2-tree-component的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！