angular - Functie bij (closed) van <mat-expansion-panel> wordt aangeroepen wanneer ik een ander paneel open

Ik gebruik de mat-accordion en hierin zitten meerdere mat-expansion-panel. Op het allereerste mat-expansion-panel roep ik een functie aan bij (closed). Standaard is het allereerste mat-expansion-panel gesloten. Nu, wanneer de pagina wordt geladen en ik klik op het tweede mat-expansion-panel, wordt de functie van het allereerste mat-expansion-panel (closed) aangeroepen (wat niet zou moeten gebeuren aangezien het nog niet geopend is).

Ik wil dat wanneer we een uitbreidingspaneel openen en het vervolgens sluiten of een ander uitbreidingspaneel openen, alleen de (gesloten) functie van het eerste uitbreidingspaneel wordt aangeroepen.

<mat-accordion class="example-headers-align myaccordion">
             <mat-expansion-panel  hideToggle="true" class="myexpension" (opened)="fetchGeneralInfo()" (closed)="collpaseClose(0)"  #generalInfo>
             <mat-expansion-panel-header>
                <mat-panel-title>
                            General Information
                </mat-panel-title>
 </mat-expansion-panel>

   <mat-expansion-panel hideToggle="true" class="myexpension" #guaInfo (opened)="fetchGua()" >
    <mat-expansion-panel-header>
      <mat-panel-title>
        Gurantor Information
      </mat-panel-title>
 </mat-expansion-panel>

Antwoord #1

Heel laat antwoord, maar ik kwam hetzelfde probleem tegen.

In plaats van (opened)=... te gebruiken, gebruik (afterExpand)=....

Antwoord #2

Het mat-accordion-component heeft een invoereigenschap multi. @Input() multi: boolean: Of het accordion meerdere tegelijk uitgeklapte accordion-items moet toestaan. Omdat het niet op true is ingesteld, kan het het closed-event voor een ander expansiepaneel activeren. Stel multi in op true <mat-accordion [multi]="true"> en controleer.