Angular Material 6.0.1 Tree 默认打开并展开/折叠所有

问题描述

我在我的项目中使用了 Angular Material Tree.是否可以默认打开树.

I'm using the Angular Material Tree in my project.Is it possible to have the tree opened by default.

有没有办法同时展开/折叠所有节点(例如，使用按钮)

And could there be a way to expand/collapse all the nodes at once (eg. with a button)

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

推荐答案

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

MatTree's treeControl provide a expandAll method which you can use to expand all tree nodes, and collapseAll to close all tree nodes.

您可以通过ViewChild 实例化MatTree 并在ngAfterViewInit 生命钩子中调用expandAll 使其展开默认情况下.

You can can instance of MatTree via ViewChild and call expandAll in ngAfterViewInit life hook to make it expand by default.

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

参见示例.

see example.

这篇关于Angular Material 6.0.1 Tree 默认打开并展开/折叠所有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！