Angular Material & NGRX问题：输入变更时mat-expansion-panel自动关闭

我之前在开发Angular + NGRX的项目时也遇到过一模一样的问题！核心原因是当Store状态更新后，父组件传递给子组件的数据发生变化，导致子组件里的mat-expansion-panel列表被重新渲染，所有面板的展开状态丢失了。下面给你几个实用的解决方案，按推荐优先级排序：

1. 用trackBy优化*ngFor渲染（最简单有效） #

如果你的面板是通过*ngFor循环生成的，Angular默认会在数据源变化时重新创建所有DOM元素，这就是面板全部关闭的直接原因。添加trackBy函数可以告诉Angular只更新真正变化的项，保留其他项的状态（包括展开状态）。

实现步骤： #

• 在子组件中定义trackBy函数，根据面板数据的唯一标识（比如id）来跟踪项：

trackByPanelId(index: number, panelData: YourPanelDataType): string {
  return panelData.id; // 替换成你数据里的唯一字段
}

• 在*ngFor指令中添加这个trackBy：

<mat-accordion>
  <mat-expansion-panel 
    *ngFor="let panel of panelData; trackBy: trackByPanelId"
  >
    <!-- 面板内容 -->
  </mat-expansion-panel>
</mat-accordion>

这样当Store更新数据后，Angular只会重新渲染那些id发生变化的面板，其他已经展开的面板会保持原来的状态。

2. 在组件内手动跟踪展开状态 #

如果trackBy不能完全解决问题（比如你的数据项本身没有变化，但需要更新内容），可以在子组件内部维护一个对象，记录每个面板的展开状态：

实现步骤： #

• 在子组件中定义一个状态对象：

private panelExpansionStates: { [panelId: string]: boolean } = {};

• 绑定面板的expanded属性，并监听opened/closed事件更新状态：

<mat-accordion>
  <mat-expansion-panel 
    *ngFor="let panel of panelData"
    [expanded]="panelExpansionStates[panel.id] || false"
    (opened)="panelExpansionStates[panel.id] = true"
    (closed)="panelExpansionStates[panel.id] = false"
  >
    <!-- 面板内容 -->
  </mat-expansion-panel>
</mat-accordion>

• 注意：当新的panelData传入时，不要重置panelExpansionStates，只需要为新增的面板初始化状态即可（可选，默认false）。

3. 将展开状态存入NGRX Store（适合全局状态需求） #

如果需要在多个组件间同步面板的展开状态，或者希望页面刷新后保留状态，可以把展开状态存入NGRX Store中：

实现步骤： #

• 定义相关的Action、Reducer和Selector：

// Action
export const togglePanelExpansion = createAction(
  '[Panel] Toggle Expansion',
  props<{ panelId: string; expanded: boolean }>()
);

// Reducer
interface PanelState {
  expansionStates: { [panelId: string]: boolean };
}

const initialState: PanelState = {
  expansionStates: {}
};

export const panelReducer = createReducer(
  initialState,
  on(togglePanelExpansion, (state, { panelId, expanded }) => ({
    ...state,
    expansionStates: {
      ...state.expansionStates,
      [panelId]: expanded
    }
  }))
);

// Selector
export const selectPanelExpansionStates = createSelector(
  selectFeatureState, // 替换成你的Feature Selector
  (state) => state.panel.expansionStates
);

• 在子组件中订阅Selector，并绑定到面板：

panelExpansionStates$ = this.store.select(selectPanelExpansionStates);

<mat-accordion>
  <mat-expansion-panel 
    *ngFor="let panel of panelData"
    [expanded]="(panelExpansionStates$ | async)?.[panel.id] || false"
    (opened)="store.dispatch(togglePanelExpansion({ panelId: panel.id, expanded: true }))"
    (closed)="store.dispatch(togglePanelExpansion({ panelId: panel.id, expanded: false }))"
  >
    <!-- 面板内容 -->
  </mat-expansion-panel>
</mat-accordion>

这个方案虽然复杂一些，但能实现全局的状态同步，适合更复杂的业务场景。

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