在material accordion中重新加载数据源后保持展开的行状态

Question

我有一个带有嵌套展开面板的accordion，我想在重新加载数据后保持每一行的已展开/未展开状态。

我在扩展输入中的material accordion文档中找到了可以用于扩展面板的，但我没有看到一个解决方案来保持每一行的状态，以便将其传递给扩展输入。https://material.angular.io/components/expansion/api

        <mat-expansion-panel *ngFor="let region of (groupedData | keyvalue)">
            <mat-expansion-panel *ngFor="let country of (region.value | keyvalue)"
              togglePosition='before'>
            </mat-expansion-panel>
        </mat-expansion-panel>

Answer 1

如果您跟踪扩展的区域和国家/地区，情况会怎样？

expandedRegions: { [key: string]: boolean } = {};
expandedCountries: { [key: string]: boolean } = {};

为mat-expansion-panel组件的opened和closed输出添加一些事件处理程序，并相应地更新映射：

<mat-expansion-panel *ngFor="let region of (groupedData | keyvalue: regionSortFn)"
  (opened)="handleRegionPanelStateChange(region.key, true)"
  (closed)="handleRegionPanelStateChange(region.key, false)"
  [expanded]="expandedRegions[region.key]">
  <!-- ... -->
  <mat-expansion-panel *ngFor="let country of (region.value | keyvalue: countrySortFn)"
    togglePosition='before'
    (opened)="handleCountryPanelStateChanged(country.key, true)"
    (closed)="handleCountryPanelStateChanged(country.key, false)"
    [expanded]="expandedCountries[country.key]">
    <!-- ... -->
  </mat-expansion-panel>
</mat-expansion-panel>

处理程序就是这样：

handleRegionPanelStateChange(key: string, isOpen: boolean) {
  this.expandedRegions = { ...this.expandedRegions, [key]: isOpen };
}

handleCountryPanelStateChanged(key: string, isOpen: boolean) {
  this.expandedCountries = { ...this.expandedCountries, [key]: isOpen };
}

无论何时重新加载数据，以前展开的面板都应保持其状态。如果您刷新页面，这当然会丢失，如果您需要在页面刷新期间保持，请查看会话存储或本地存储，并将它们放在那里。