Angular *ngFor渲染mat-expansion-panel时折叠展开控制异常问题

出现全面板同步开合的核心原因有三个：

• 所有mat-expansion-panel的[expanded]属性绑定了同一个全局布尔变量，只要这个变量值变化，所有面板都会同步更新开合状态
• 自定义的折叠/展开图标放在面板头内时，点击事件没有阻止冒泡，会同时触发面板头默认的开合逻辑，进一步导致状态混乱
• 嵌套*ngFor渲染时没有给每个面板分配独立的状态追踪标识，无法单独维护每个面板的开合状态

1. 为每个面板维护独立的展开状态 #

不要用单个全局布尔值存储面板状态，选择以下任意一种方式存储独立状态：

• 直接在遍历的数据源对象上增加expanded字段，默认值设为false
• 单独创建一个Set类型的变量，存储当前处于展开状态的面板ID
  示例（基于数据源加字段的方式）：

// 组件类中定义带展开状态的嵌套面板数据源
panelData = [
  {
    id: 1,
    title: "一级面板1",
    expanded: false,
    content: "面板1内容",
    children: [
      { id: 11, title: "子面板1-1", expanded: false, content: "子面板内容" }
    ]
  },
  {
    id: 2,
    title: "一级面板2",
    expanded: false,
    content: "面板2内容",
    children: [
      { id: 21, title: "子面板2-1", expanded: false, content: "子面板内容" }
    ]
  }
];

// 自定义图标点击的切换方法
togglePanel(panelItem: any, e: Event) {
  e.stopPropagation(); // 阻止事件冒泡，避免触发面板头默认点击逻辑
  panelItem.expanded = !panelItem.expanded;
}

2. 模板层绑定当前面板的独立状态 #

*ngFor遍历渲染时，每个面板的[expanded]属性直接绑定当前遍历项自己的expanded字段，同时监听面板自带的opened、closed事件同步状态，避免手动点击面板头（非自定义图标区域）时状态不同步：

<mat-accordion>
  <!-- 一级面板遍历 -->
  <mat-expansion-panel
    *ngFor="let panel of panelData"
    [expanded]="panel.expanded"
    (opened)="panel.expanded = true"
    (closed)="panel.expanded = false"
    hideToggle
  >
    <mat-expansion-panel-header>
      <mat-panel-title class="w-full flex justify-between items-center">
        <span>{{panel.title}}</span>
        <!-- 自定义开合图标 -->
        <button mat-icon-button (click)="togglePanel(panel, $event)">
          <mat-icon>{{panel.expanded ? 'expand_less' : 'expand_more'}}</mat-icon>
        </button>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <p>{{panel.content}}</p>

    <!-- 嵌套子面板，逻辑和一级面板完全一致 -->
    <mat-accordion class="ml-4">
      <mat-expansion-panel
        *ngFor="let childPanel of panel.children"
        [expanded]="childPanel.expanded"
        (opened)="childPanel.expanded = true"
        (closed)="childPanel.expanded = false"
        hideToggle
      >
        <mat-expansion-panel-header>
          <mat-panel-title class="w-full flex justify-between items-center">
            <span>{{childPanel.title}}</span>
            <button mat-icon-button (click)="togglePanel(childPanel, $event)">
              <mat-icon>{{childPanel.expanded ? 'expand_less' : 'expand_more'}}</mat-icon>
            </button>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <p>{{childPanel.content}}</p>
      </mat-expansion-panel>
    </mat-accordion>
  </mat-expansion-panel>
</mat-accordion>

• 如果不想修改原始数据源结构，用Set存储展开面板ID的逻辑完全一致：判断面板是否展开时用expandedSet.has(panel.id)，切换状态时判断ID在集合中就删除，不存在就加入
• 只要自定义交互元素放在mat-expansion-panel-header内部，就必须给元素的点击事件加e.stopPropagation()，否则会触发面板头默认的开合行为，导致状态异常
• 禁止给所有面板绑定同一个全局状态变量，例如[expanded]="globalExpandFlag"这种写法必然导致所有面板状态同步

内容的提问来源于stack exchange，提问作者HIHI NNG