Angular Material 6.0.1 树形菜单默认展开和全部展开/折叠

Question

我在项目中使用了Angular Material Tree组件。

是否有可能默认展开树形结构？

同时，是否可以通过一个按钮来一次性展开/折叠所有节点？

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

- saibot

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

请查看示例。

- Pengyy

---

为使expandAll功能正常工作，请确保在TreeControl中，变量dataNodes已设置为树的所有根级数据节点。 - Aditya Vikas Devarapalli

@HobojoeBr 这是链接 https://stackblitz.com/edit/angular-wmuvwj-qb8kso - Aditya Vikas Devarapalli

顺便问一下，是否可以为树添加树线？ - Royi Namir

@RoyiNamir 我没有看到关于您期望的功能的任何选项，也许您可以向他们的团队提供您的想法。 :-) - Pengyy

对于你的例子，我不得不添加dataChange订阅，在ngAfterViewInit中调用.expandAll()，才能使其工作。 - Oscar

Answer 2

此外，请确保设置treeControl节点。在加载数据后，您应该

treeControl.dataNodes = nodes; 
treeControl.expandAll()

查看此 GitHub 问题

- Pipo

Answer 3

截至2023年9月，

可以通过调用expandAll()方法来以编程方式展开所有树节点：

ngOnInit() {
  this.dataSource.data = TREE_DATA;
  this.treeControl.expandAll();
}

使用collapseAll()方法可以将它们全部折叠起来。

ngOnInit() {
  this.dataSource.data = TREE_DATA;
  this.treeControl.collapseAll();
}

- Davi Mello