当我打开另一个面板时，会调用 <mat-expansion-panel> 上的函数（关闭）

Posted 2023-02-22

【中文标题】当我打开另一个面板时，会调用 <mat-expansion-panel> 上的函数（关闭）

【英文标题】：Function on (closed) of <mat-expansion-panel> is called when I am opening the another panel

【发布时间】：2018-07-03 16:24:50

【问题描述】：

我正在使用 mat-accordion，里面有多个 mat-expansion-panel。在第一个垫子扩展面板上，我在（关闭）上调用了一个函数。默认情况下，第一个 mat-expansion-panel 是关闭的。现在当页面加载并且我点击第二个 mat-expansion-panel 时，第一个 mat-expansion-panel（关闭）的功能被调用（不应该因为它还没有打开）。

我希望当我们打开一个扩展面板然后关闭它或任何其他打开任何其他扩展面板时，只有第一个扩展面板的（关闭的）函数将进入调用。

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

【问题讨论】：

这部分，collpaseClose(0) 看起来像是潜在的罪魁祸首。您总是使用 0 索引调用该方法。您应该使用一个变量来指定点击哪个扩展面板。

HI @DanielB..抱歉回复晚了...但我不是每次都用 0 打电话。对于每个扩展面板，我都有从 0 开始的不同索引。我正在比较 TS 文件中的索引。

【参考方案1】：

mat-accordion 组件有一个输入属性multi。 @Input()multi: boolean : 手风琴是否应该同时允许多个展开的手风琴项目。 由于未设置为 true，因此可能会触发其他扩展面板的关闭事件。 将 multi 设置为 true <mat-accordion [multi]="true"> 并检查。

【参考方案2】：

答案很晚，但我遇到了同样的问题。

用(afterExpand)=...代替(opened)=...。