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

Question

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

Answer 1

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

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

这是一个运行的例子.

Answer 2

源链接

对于最新版本的 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 [multi]="true"
#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();
}


...
...