Material Accordion重载数据源后如何保留嵌套展开面板的行状态

1. 定义状态存储结构与相关逻辑 #

采用两层键值对结构存储状态，直接和你的groupedData的键做对应索引，TS侧代码参考如下：

// 状态存储结构：外层key对应区域key，内层key对应国家key
expansionState: {
  [regionKey: string]: {
    expanded: boolean,
    countries: { [countryKey: string]: boolean }
  }
} = {};

// 区域面板状态切换处理
toggleRegionState(regionKey: string, isExpanded: boolean) {
  if (!this.expansionState[regionKey]) {
    this.expansionState[regionKey] = { expanded: false, countries: {} };
  }
  this.expansionState[regionKey].expanded = isExpanded;
}

// 国家面板状态切换处理
toggleCountryState(regionKey: string, countryKey: string, isExpanded: boolean) {
  if (!this.expansionState[regionKey]) {
    this.expansionState[regionKey] = { expanded: false, countries: {} };
  }
  this.expansionState[regionKey].countries[countryKey] = isExpanded;
}

// 新数据加载完成后调用，不覆盖已有的状态，新增条目自动初始化默认状态
initStateIfMissing() {
  Object.keys(this.groupedData).forEach(regionKey => {
    if (!this.expansionState[regionKey]) {
      this.expansionState[regionKey] = {
        expanded: false, // 可自定义区域默认展开/收起状态
        countries: {}
      };
    }
    Object.keys(this.groupedData[regionKey]).forEach(countryKey => {
      if (this.expansionState[regionKey].countries[countryKey] === undefined) {
        this.expansionState[regionKey].countries[countryKey] = false; // 可自定义国家默认展开/收起状态
      }
    })
  })
}

2. 修改模板绑定对应属性与事件 #

调整你的HTML代码，绑定expanded输入属性和面板开关事件：

<mat-expansion-panel 
  *ngFor="let region of (groupedData | keyvalue)"
  [expanded]="expansionState[region.key]?.expanded ?? false"
  (opened)="toggleRegionState(region.key, true)"
  (closed)="toggleRegionState(region.key, false)"
>
    <mat-expansion-panel 
      *ngFor="let country of (region.value | keyvalue)" 
      togglePosition='before'
      [expanded]="expansionState[region.key]?.countries[country.key] ?? false"
      (opened)="toggleCountryState(region.key, country.key, true)"
      (closed)="toggleCountryState(region.key, country.key, false)"
    >
    </mat-expansion-panel>
</mat-expansion-panel>

如果你的项目使用的TypeScript版本不支持空值合并运算符??，可以替换为|| false使用

3. 数据重加载适配 #

每次重新请求更新groupedData之后，调用一次initStateIfMissing()方法即可，已有的面板展开/收起状态会完整保留，新增的条目会使用预设的默认状态。

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