Question

我正在使用angular2-tree-component并希望显示已展开的树。 Angular docs表示在数据到达树之后使用initialized事件来扩展树：

创建树模型后的触发器。适合执行操作立即在init上，如扩展/激活某些节点等。您可以使用ref访问树模型，如API中所述部分。

但渲染后树不会展开：

我正在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;        
}

处理initialized事件的代码：

onTreeLoad(){
    //alert('on 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>

在加载数据之前触发

initialized事件。可以通过日志顺序看到：

那么，在将数据加载到initialized之前，我做错了什么或为什么treeview事件会被触发？

Answer 1

尝试向树中添加ngIf，以便在数据准备好之前不会渲染

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

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

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

＆＃34;初始化＆＃34;在加载数据之前调用angular2-tree-component事件

1 个答案: