Angular Material 6.0.1默认打开树并展开/折叠全部 [英] Angular Material 6.0.1 Tree default opened and expand/collapse all

问题描述

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

还有没有办法一次扩展/折叠所有节点(例如，使用按钮)

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

解决方案

MatTree的treeControl提供了expandAll方法，可用于扩展所有树节点，而collapseAll方法可用于关闭所有树节点./p>

您可以通过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>

请参见 示例 .

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's treeControl provide a expandAll method which you can use to expand all tree nodes, and collapseAll to close all tree nodes.

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();
}

Source example for calling from template:

<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默认打开树并展开/折叠全部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！