angular - 展开 Angular Material Accordion

Question

我在同一页有 2 个不同的 Accordion 。每个 Accordion 都有多个扩展面板。如何关闭 2 个 Accordion 的所有扩展面板并打开当前选择的扩展面板？我可以关闭当前 Accordion 的扩展面板，但另一个保持打开状态。两个 Accordion 的作用相同，只是它从不同的列表中获取数据，并且某些 div 位于两个 Accordion 之间

`<mat-accordion [multi]= "true"  >
    <mat-expansion-panel *ngFor = "let item of items" (click) = "viewItem(item)" >
        <mat-expansion-panel-header>
           <mat-panel-title>
              //something
           </mat-panel-title>
        </mat-expansion-panel-header>
            //something..
    </mat-expansion-panel>
</mat-accordion> 
<mat-accordion [multi]= "true"  >
    <mat-expansion-panel *ngFor = "let item of items" (click) = "viewItem(item)" >
      <mat-expansion-panel-header>
         <mat-panel-title>
              //something
         </mat-panel-title>
      </mat-expansion-panel-header>
            //something..
    </mat-expansion-panel>
</mat-accordion>`

Answer 1

当您打开其中一个面板时，您可以关闭所有其他面板:

TS

@ViewChildren(MatExpansionPanel) panels: QueryList<MatExpansionPanel>;

closeOtherPanels(openPanel: MatExpansionPanel) {
    this.panels.forEach(panel => {
        if (panel !== openPanel) {
            panel.close();
        }
    });
}

HTML

<mat-accordion [multi]= "true">
    <mat-expansion-panel *ngFor = "let item of items" (click) = "viewItem(item)" #panel (opened)="closeOtherPanels(panel)" >
        <mat-expansion-panel-header>
           <mat-panel-title>
              //something
           </mat-panel-title>
        </mat-expansion-panel-header>
            //something..
    </mat-expansion-panel>
</mat-accordion> 
<mat-accordion [multi]= "true">
    <mat-expansion-panel *ngFor = "let item of items" (click) = "viewItem(item)" #panel (opened)="closeOtherPanels(panel)" >
      <mat-expansion-panel-header>
         <mat-panel-title>
              //something
         </mat-panel-title>
      </mat-expansion-panel-header>
            //something..
    </mat-expansion-panel>
</mat-accordion>