最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - angular2-tree-component is not expanded by default - Stack Overflow

programmeradmin1浏览0评论

I am using angular2-tree-ponent and want to show already expanded tree. Now my tree is not expanded after loading page:

My HTML looks like this:

<div class="sidebartree-ul" [ngStyle]="{'background-color': 'white'}">
    <tree-root class="panel-body " [nodes]="Items" [options]="customTemplateStringOptions" 
        #tree >
        <ng-template #loadingTemplate>
            Loading..
        </ng-template>

        <ng-template #treeNodeTemplate let-node>
            <tree-node-expander [node]="node"></tree-node-expander>
            <span *ngIf="node?.data?.expanded === true " title="{{node.data.subTitle}}">
                <b> {{ node.data.name }} {{ childrenCount(node) }} </b></span>            
            <span *ngIf="!node?.data?.expanded === true" title="{{node.data.subTitle}}">
                <b>{{ node.data.name }} {{ childrenCount(node) }}  </b></span>            
        </ng-template>
        <ng-template #loadingTemplate>Loading, please hold....</ng-template>
    </tree-root>
</div>

I see an example from github and I've set isExpandedField to expanded, however, children fields are not expanded:

customTemplateStringOptions: any = {
        isExpandedField: 'expanded',
        idField: 'uuid',
        nodeHeight: 23        
    }

public Items: any[];

And my data for TreeView looks like this:

If I add <tree-node-expander [node]="node"></tree-node-expander> and click at it, then it expands, but it is now what I want:

<tree-root class="panel-body " [nodes]="Items" 
    [options]="customTemplateStringOptions" #tree >
    ...

    <ng-template #treeNodeTemplate let-node>
        <tree-node-expander [node]="node"></tree-node-expander>
        ...
    </ng-template>
    <ng-template #loadingTemplate>Loading, please hold....</ng-template>
</tree-root>

Does anybody know what I am doing wrong to expand all children immediately?

I am using angular2-tree-ponent and want to show already expanded tree. Now my tree is not expanded after loading page:

My HTML looks like this:

<div class="sidebartree-ul" [ngStyle]="{'background-color': 'white'}">
    <tree-root class="panel-body " [nodes]="Items" [options]="customTemplateStringOptions" 
        #tree >
        <ng-template #loadingTemplate>
            Loading..
        </ng-template>

        <ng-template #treeNodeTemplate let-node>
            <tree-node-expander [node]="node"></tree-node-expander>
            <span *ngIf="node?.data?.expanded === true " title="{{node.data.subTitle}}">
                <b> {{ node.data.name }} {{ childrenCount(node) }} </b></span>            
            <span *ngIf="!node?.data?.expanded === true" title="{{node.data.subTitle}}">
                <b>{{ node.data.name }} {{ childrenCount(node) }}  </b></span>            
        </ng-template>
        <ng-template #loadingTemplate>Loading, please hold....</ng-template>
    </tree-root>
</div>

I see an example from github and I've set isExpandedField to expanded, however, children fields are not expanded:

customTemplateStringOptions: any = {
        isExpandedField: 'expanded',
        idField: 'uuid',
        nodeHeight: 23        
    }

public Items: any[];

And my data for TreeView looks like this:

If I add <tree-node-expander [node]="node"></tree-node-expander> and click at it, then it expands, but it is now what I want:

<tree-root class="panel-body " [nodes]="Items" 
    [options]="customTemplateStringOptions" #tree >
    ...

    <ng-template #treeNodeTemplate let-node>
        <tree-node-expander [node]="node"></tree-node-expander>
        ...
    </ng-template>
    <ng-template #loadingTemplate>Loading, please hold....</ng-template>
</tree-root>

Does anybody know what I am doing wrong to expand all children immediately?

Share Improve this question asked Nov 29, 2017 at 16:51 StepUpStepUp 38.2k16 gold badges92 silver badges157 bronze badges 3
  • It seems that you just need to call the method tree.treeModel.expandAll() – Hackerman Commented Nov 29, 2017 at 16:58
  • @Hackerman could you be very kind to show how can I get tree to call this function: tree.treeModel.expandAll()? – StepUp Commented Nov 29, 2017 at 17:02
  • 2 angular2-tree.readme.io/docs , it's the method that gets called in the demo, by the Expand All button. – Hackerman Commented Nov 29, 2017 at 17:07
Add a ment  | 

3 Answers 3

Reset to default 4

The angular lifecycle isn't reliable for expanding the tree. The more reliable way is to use the (initialized) event on the tree root.

Docs: https://angular2-tree.readme.io/docs/events#initialized

In your ponent html file:

<tree-root (initialized)="onTreeLoad()">

In your ponent class:

onTreeLoad() {
    this.tree.treeModel.expandAll();
}

I ran into the same problem. I used the below hack which i learned it from using ngx-toastr in ngOnInit. I worked for me. Not sure why ngAfterViewInit is not working for me.

ngAfterViewInit() {
  setTimeout(() => this.tree.treeModel.expandAll(), 500)
}

I had to adjust the waiting time to make it work. by animation, you can make it for expansion.

I am still new to angular to provide in depth explanation. Let's see if this works for you and someone provide explanation.

You just need to call the expandAll method. You can check the demo, here
https://angular2-tree.readme.io/docs

The Expand All button calls the tree.treeModel.expandAll() method.

发布评论

评论列表(0)

  1. 暂无评论