Angular Material 6.0.1 树默认打开并展开/折叠所有答案

【问题标题】：Angular Material 6.0.1 Tree default opened and expand/collapse allAngular Material 6.0.1 树默认打开并展开/折叠所有
【发布时间】：2018-05-11 07:13:02
【问题描述】：

我在我的项目中使用了 Angular 材质树。是否可以默认打开树。

是否有一种方法可以一次展开/折叠所有节点（例如，使用按钮）

https://material.angular.io/components/tree/overview

【问题讨论】：

标签： angular tree angular-material

【解决方案1】：

MatTree的treeControl提供了一个expandAll方法可以用来展开所有的树节点，collapseAll可以用来关闭所有的树节点。

您可以通过ViewChild 实例化MatTree 并在ngAfterViewInit 生命挂钩中调用expandAll 使其默认扩展。

@ViewChild('tree') tree;

ngAfterViewInit() {
  this.tree.treeControl.expandAll();
}

模板调用的源码示例：

<button (click)="tree.treeControl.collapseAll()">collapseAll</button>
<button (click)="tree.treeControl.expandAll()">expandAll</button>
<mat-tree #tree [dataSource]="dataSource" [treeControl]="treeControl">
  ...
<mat-tree>

见example。

【讨论】：

完美。谢谢！
要使expandAll 功能正常工作，请确保TreeControl 的dataNodes 变量必须设置为树的所有根级数据节点。
@AdityaVikasDevarapalli 无法使用 Angular Material 上的标准示例使其工作：stackblitz.com/edit/angular-wmuvwj您能帮忙吗？
@HobojoeBr 给你stackblitz.com/edit/angular-wmuvwj-qb8kso
顺便说一句，是否可以为树添加树线？

【解决方案2】：

另外确保设置了 treeControl 节点。加载数据后你应该

treeControl.dataNodes = nodes; 
treeControl.expandAll()

See this github issue

【讨论】：