Angular 2材料设计<mat-expansion-panel>展开全部/全部折叠

Question

我想实现展开全部并在角度2材质中折叠全部。任何人都可以提出想法吗？怎么做？

Answer 1

1-您应该删除mat-accordion以启用多个展开的面板。

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

Here is a running example.

编辑

从版本6.0.0-beta-0开始，您可以使用multi参数以及openAll和closeAll函数：

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

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

2-然后使用openAll和closeAll功能打开或关闭所有面板：

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

Here is a running example.

Answer 2

To use a toggle button (instead of 2 buttons like ibenjelloun's answer), you can use this in the template:

<button (click)="toggleExpandState()">{{ allExpandState ? "Collapse All" : "Expand All" }}</button>

and add this in the component:

toggleExpandState() { this.allExpandState = !this.allExpandState; }

This introduces a problem where if you expand all the panels manually, the button will still say "Expand All" and vice versa, so you could add a listener when expanding/collapsing a single panel to check if all the panels are expanded or collapsed, and change the variable allExpandState accordingly.

Also, you don't have to remove the mat-accordian, just add multi="true" to it.

Answer 3

来源Link

对于最新版本的Angular材质8

模板

<button mat-flat-button color="primary" (click)="openAllPanels()"><b>Open Panels</b></button> &nbsp;
<button mat-flat-button color="primary" (click)="closeAllPanels()"><b>Close Panels</b></button>

<mat-accordion
#accordion="matAccordion"
>
  <mat-expansion-panel 
  #mapanel="matExpansionPanel"
  >
    <mat-expansion-panel-header>
        <b>Title</b>
    </mat-expansion-panel-header>
    <p>Description</p>
    <mat-action-row>
        <button mat-flat-button (click)="mapanel.close()">Click to close</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>

组件

import { MatAccordion } from '@angular/material';

...
...

@ViewChild('accordion',{static:true}) Accordion: MatAccordion


...

...

closeAllPanels(){
    this.Accordion.closeAll();
}
openAllPanels(){
    this.Accordion.openAll();
}


...
...