Question

我正在使用angular2-tree-component并希望显示已展开的树。加载页面后，我的树未展开：

我的HTML看起来像这样：

<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>

我看到an example from github，我已将isExpandedField设置为expanded，但子字段未展开：

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

public Items: any[];

我的TreeView数据如下所示：

如果我添加<tree-node-expander [node]="node"></tree-node-expander>并点击它，那么它会展开，但它现在就是我想要的：

<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>

有人知道我做错了什么来立即扩大所有孩子吗？

Answer 1

您只需要调用expandAll方法即可。你可以在这里查看演示 https://angular2-tree.readme.io/docs

Expand All按钮调用tree.treeModel.expandAll()方法。

Answer 2

角度生命周期对于扩展树不可靠。更为可靠的方法是在树根上使用(initialized)事件。

文档：https://angular2-tree.readme.io/docs/events#initialized

在您的组件html文件中：

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

在您的组件类中：

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

Answer 3

我遇到了同样的问题。我使用下面的技巧，该技巧是通过在ngOnInit中使用ngx-toastr中学到的。我为我工作。不确定ngAfterViewInit为什么对我不起作用。

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

我不得不调整等待时间，以使其正常运行。通过动画，您可以使其扩展。

我仍然不愿意深入介绍角度。让我们看看这是否对您有用，有人提供解释。

angular2-tree-component默认不展开

3 个答案: