如何使用角材料的扩展面板打开多面板？

Question

我想使用扩展面板，结果我想打开多个面板，比如这个例子： open example

这是我的代码：

<mat-accordion>
  <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>

Answer 1

请考虑以下stackblitz

在子扩展面板上添加 hideToggle disabled 有助于匹配链接的图片，使用了两个 mat-accordions，第二个具有 multi允许打开多个面板的属性

<mat-accordion>
  <mat-expansion-panel class="parentPanel" [expanded]="true">
    <mat-expansion-panel-header class="parentPanel_header">
      <mat-panel-title> Group </mat-panel-title>
    </mat-expansion-panel-header>
    <mat-accordion multi>
      <mat-expansion-panel class="childPanel childPanelCount" [expanded]="true" hideToggle disabled>
        <p>Elements count {{elements.length}}</p>
      </mat-expansion-panel>
      <ng-container *ngFor="let i of elements">
        <mat-expansion-panel class="childPanel" [expanded]="true" hideToggle disabled>
          <p>Element</p>
        </mat-expansion-panel>
      </ng-container>
    </mat-accordion>
  </mat-expansion-panel>
</mat-accordion>

需要一些 css 来实现匹配的外观，尽管这不是 css 问题

mat-expansion-panel.parentPanel {
  box-shadow: none;
  background-color: transparent;
}
.parentPanel_header {
  background-color: white;
  border: 1px solid lightgray;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.childPanelCount{
  opacity: 50%;
}

.parentPanel mat-expansion-panel.childPanel {
  margin-top: 1em !important;
}

::ng-deep .childPanel div.mat-expansion-panel-body {
  padding-bottom: 0 !important;
}