Angular 2 材料设计<mat-expansion-panel>全部展开全部折叠 [英] Angular 2 material design <mat-expansion-panel> expand all / collapse all

问题描述

我想在 angular 2 材质中实现全部展开和全部折叠.任何人都可以提供想法吗?怎么做?

I wanted to implement expand all and collapse all in angular 2 material. Can any one give idea? how to do that?

推荐答案

1- 您应该删除 mat-accordion 以启用多个扩展面板.

1- You should remove the mat-accordion to enable multiple expanded panels.

2- 使用 expanded 参数同时更改多个状态.

2- Use the expanded parameter to change multiple states at the same time.

这是一个运行示例.

编辑

从版本 6.0.0-beta-0 你可以使用 multi 参数和 openAll 和 closeAll 函数:

From version 6.0.0-beta-0 you can use multi parameter and the openAll and closeAll functions :

1- 更改 mat-accordion 元素以将 muti 设置为 true 并获取 MatAccordionComponent 实例:

1- Change the mat-accordion element to set the muti to true and get the MatAccordionComponent instance :

<mat-accordion #accordion="matAccordion" [multi]="true">

2- 然后使用 openAll 和 closeAll 函数打开或关闭所有面板:

2- Then use the openAll and closeAll functions to open or close all panels :

<button (click)="accordion.openAll()">Expand All </button>
<button (click)="accordion.closeAll()">Collapse All </button>

这是一个运行示例.

这篇关于Angular 2 材料设计<mat-expansion-panel>全部展开全部折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！