Angular Material 6.0.1 Árvore padrão aberta e expandir / recolher tudo

Saibot

Estou usando a Angular Material Tree no meu projeto. É possível ter a árvore aberta por padrão.

E poderia haver uma maneira de expandir / recolher todos os nós de uma vez (por exemplo, com um botão)

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

Pengyy

MatTreeO treeControl fornece um expandAllmétodo que você pode usar para expandir todos os nós da árvore e collapseAllfechar todos os nós da árvore.

Você pode criar um exemplo de MatTreevia ViewChilde call expandAllin ngAfterViewInitlife hook para fazê-lo expandir por padrão.

@ViewChild('tree') tree;

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

Exemplo de fonte para chamada do template:

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

veja o exemplo .

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Como executar 'Expandir' e 'Recolher' na visualização em árvore do Kendo clicando no botão Expandir e no botão Recolher

Expandir / recolher acordeão tudo sem jQuery

React - Expandir / recolher tudo

Como expandir ou recolher programaticamente o item da árvore no Ui do material?

Como expandir ou recolher programaticamente o item da árvore no Ui do material?

Angular 4+ bootstrap NgbAccordion como expandir / recolher tudo

Como expandir / recolher uma visualização em árvore recursiva no Angular 2?

Recolher / Expandir div aninhado no Angular 6

Expandir / recolher a árvore de materiais usando dados booleanos (Angular 7)

Expandir / recolher a árvore de materiais usando dados booleanos (Angular 7)

Expandir / recolher itens da lista no menu em árvore recursiva no angular

Recolher e expandir o texto no Texto Tkinter

Android: Recolher e expandir programaticamente o CollapsingToolbarLayout

recolher / expandir animação em Angular

Expandir/Recolher linhas da tabela - Material Angular 11

Recolher tudo e ainda ter o primeiro acordeão aberto por padrão

Acordeão da interface do usuário do jQuery Expandir / Recolher tudo

Bootstrap 4 Expandir tudo / Recolher tudo botão não funciona quando o elemento de recolhimento já está sendo exibido

bootstrap acordeão padrão recolher tudo e trabalhar como flipkart refinar a pesquisa

Mat-árvore de material angular com caixas de seleção selecionar tudo

Expandir e recolher a tabela HTML

Expandir e recolher Divs no React

Angular 5 expandir / recolher lista

Como ocultar o botão expandir / recolher na visualização em árvore virtual?

Bootstrap Glyphicon (recolher e expandir) em não funcionar

Android: como expandir e recolher o tamanho de cardView no RecyclerView

Flutter recolher e expandir widget com animação elástica

Expandir e recolher linhas por meio de um botão

expandir e recolher a linha para a tabela ng não funcionar

TOP lista

quentelabel

Arquivo