我有一個帶有嵌套擴展面板的手風琴，我想在重新加載資料后保持每行的擴展/未擴展狀態。
我在可用于擴展面板的擴展輸入中的材料手風琴檔案中找到了，但我沒有看到保持每行狀態以將其傳遞給擴展輸入的解決方案。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>
uj5u.com熱心網友回復：
如果您跟蹤擴大的地區和國家會怎樣？
expandedRegions: { [key: string]: boolean } = {};
expandedCountries: { [key: string]: boolean } = {};
為組件的opened和closed輸出添加一些事件處理程式mat-expansion-panel并相應地更新映射：
<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 };
}
每當您重新加載資料時，先前展開的面板應保持其狀態。如果您重繪 頁面，這當然會丟失，如果您需要跨頁面重繪 保持不變，請查看會話存盤或本地存盤并將它們放在那里。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339577.html