Javascript 默认情况下，angular2树组件不展开

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

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

我的TreeView数据如下所示：

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

如果我添加

并单击它，它就会展开，但现在它就是我想要的：

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

...
...
正在装货，请稍候。。。。

---

有人知道我立即展开所有子对象的错误吗？

您只需要调用

expandAll

方法。您可以在此处查看演示

---

Expand All

按钮调用

tree.treeModel.expandAll（）

方法。

我遇到了同样的问题。我使用了下面的hack，这是我在ngOnInit中使用ngx toastr学到的。我为我工作。不知道为什么ngAfterViewInit不适合我

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

我不得不调整等待时间，使之生效。通过动画，可以使其用于扩展

---

我还是个新手，无法提供深入的解释。让我们看看这是否适用于您，并有人提供解释。

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

（初始化）

事件

文件：

在组件html文件中：

在组件类中：

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

---

似乎您只需要调用方法

tree.treeModel.expandAll（）

@Hackerman您能很好地演示如何让

tree

调用此函数：

tree.treeModel.expandAll（）

，这个方法在演示中被

全部展开

按钮调用。这真的很奇怪，但当我点击按钮并调用这个方法

tree.treeModel.expandAll

时，它就展开了。但是，如果我在

ngInit

上调用此方法，则树不会展开。如果您检查此问答，则您的组件似乎需要实现

OnInit

Man，我非常抱歉，我承诺将您的答复作为答案。向上投票！它可以工作，但我应该创建一个按钮并单击此按钮以展开所有节点。但是，我想立即展开树。@Steppup您可以通过在树根的

（已初始化）

事件中运行

tree.treeModel.expandAll（）

来完成此操作。（）

@LLai我明天会试试，然后写下结果。非常感谢！：）这不是一种非常可靠的方法——你可能会在浏览器中遇到竞争情况。