点击按钮新增mat-expansion-panel后，最新面板无法自动展开问题

问题分析 #

当前代码仅实现了新增面板的逻辑，但未控制面板的展开状态，且点击头部按钮时存在事件冒泡干扰，导致新面板无法按预期展开。

解决方案步骤 #

1. 在组件类中添加状态变量

用于跟踪当前展开的面板索引：

currentExpandedIndex: number = -1; // 初始无展开面板

2. 修改addItem方法，设置新面板为展开状态

新增面板后，将当前展开索引设为新面板的索引，确保仅最新面板展开：

addItem() {
  this.form = this._ProfileFormService.setAuthorisedSignatoryDetailForm(new TaxRegistrationAuthorisedSignatoryDetail());
  this.authorisedSignatoryDetailRef.push(this.form);
  // 设置最新面板为展开状态
  this.currentExpandedIndex = this.authorisedSignatoryDetailRef.length - 1;
}

3. 更新HTML模板，绑定展开状态并阻止事件冒泡

给mat-expansion-panel绑定expanded属性，同时给添加按钮的点击事件阻止冒泡，避免触发面板头部的默认交互：

<mat-accordion>
  <mat-expansion-panel 
    *ngFor="let detailForm of getFormControl(); let i = index;" 
    class="expansion-panel" 
    hideToggle
    [expanded]="i === currentExpandedIndex"> <!-- 绑定展开状态 -->
    <mat-expansion-panel-header>
      <div class="header-profile">
        <div>
          <p class="title">Panel</p>
        </div>
        <div class="header-profile-rightside">                        
          <p class="text-decoration-underline" 
             (click)="addItem(); $event.stopPropagation()"> <!-- 阻止事件冒泡 -->
            +Add Panel
          </p>
          <img src="../../../../assets/images/dropdown.jpg" alt="" />
        </div>
      </div>
    </mat-expansion-panel-header>
    <form class="example-form" [formGroup]="detailForm" autocomplete="off">
      <div>
        Open Panel - {{i}}
      </div>
    </form>
  </mat-expansion-panel>
</mat-accordion>

4. 性能优化（可选）

避免在*ngFor中直接调用方法，可在组件内维护表单控件数组的副本，减少变更检测时的重复计算：

detailForms: FormGroup[] = [];

ngOnInit(): void {
  this.detailForms = this.getFormControl();
  // 监听FormArray变化，实时更新副本
  this.authorisedSignatoryDetailRef.valueChanges.subscribe(() => {
    this.detailForms = this.getFormControl();
  });
}

对应HTML修改为：

*ngFor="let detailForm of detailForms; let i = index;"

原理说明 #

• 通过currentExpandedIndex变量唯一控制当前展开的面板，确保每次新增时仅最新面板处于展开状态
• $event.stopPropagation()阻止点击添加按钮时触发面板头部的默认点击事件，避免干扰展开状态的设置
• 绑定[expanded]属性直接控制面板的展开/关闭状态，替代默认的自动交互逻辑

内容的提问来源于stack exchange，提问作者Miloni Shah