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

admin管理员组

文章数量:1316001

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?

• javascript
• html
• angular
• treeview

Share Improve this question Follow asked Nov 29, 2017 at 16:51 StepUpStepUp 38.2k1616 gold badges9292 silver badges157157 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

Sorted by: 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.

本文标签： javascriptangular2treecomponent is not expanded by defaultStack Overflow