Развернуть угловой материал гармошка

Question

У меня есть 2 разных аккордеона на одной странице. каждый гармошка имеет несколько панелей расширения. как закрыть всю расширенную панель из 2-х аккордеонов и открыть выбранную в данный момент панель расширения ?? Я могу закрыть панель расширения текущего аккордеона, но другая остается открытой. и два аккордеона делают то же самое, за исключением того, что они выбирают данные из другого списка, и некоторый div находится между двумя аккордеонами

`<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>