如何使用Angular Material的Expansion Panel实现多面板同时展开功能

你当前使用的mat-accordion组件默认开启手风琴模式，同一时间仅允许单个面板展开，要实现多面板同时展开效果，仅需给mat-accordion添加multi="true"属性即可。
修改后的完整代码如下：

<mat-accordion multi="true">
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        This is the expansion title
      </mat-panel-title>
      <mat-panel-description>
        This is a summary of the content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

补充说明 #

• multi是mat-accordion的官方内置属性，默认值为false，开启后允许多个面板同时维持展开状态，不会在打开新面板时自动关闭已打开的面板
• 如果你需要单独管理每个面板的展开状态，建议为每个面板绑定独立的状态变量，避免多个面板共用同一个状态变量导致状态展示异常

内容的提问来源于stack exchange，提问作者Da reen