刷新页面后如何保留多个可展开mat-grid的行展开状态？

核心实现思路是将展开行的唯一标识持久化存储，页面加载时读取存储值恢复状态，具体操作如下：

• 定义存储已展开行ID的集合，用于统一管理展开状态

  // 存储已展开行的唯一ID，用Set结构做存在性判断效率更高
  expandedRowIds: Set<string | number> = new Set();
  

• 改造行展开/收起的触发方法，每次状态变更后同步到本地存储

  toggleRowExpand(row: any): void {
    if (this.expandedRowIds.has(row.id)) {
      this.expandedRowIds.delete(row.id);
    } else {
      this.expandedRowIds.add(row.id);
    }
    // 转成数组后存入localStorage，支持跨页面刷新保留
    localStorage.setItem('mat_table_expanded_rows', JSON.stringify([...this.expandedRowIds]));
  }
  

• 组件初始化时读取存储的展开状态，完成恢复

  ngOnInit(): void {
    // 先完成表格数据源加载
    this.dataSource.data = yourTableDataSource;
    // 恢复展开状态
    const savedExpandState = localStorage.getItem('mat_table_expanded_rows');
    if (savedExpandState) {
      this.expandedRowIds = new Set(JSON.parse(savedExpandState));
    }
  }
  

• 修改模板中行展开状态的判断逻辑
  把原模板中判断行是否展开的逻辑，替换为从已展开ID集合中判断：

  <!-- 原逻辑可能类似这样 -->
  <!-- <tr [expanded]="row === expandedElement"> -->
  <!-- 替换为 -->
  <tr [expanded]="expandedRowIds.has(row.id)">
  

补充说明 #

• 如果不需要保留到浏览器关闭后，可将localStorage替换为sessionStorage，关闭标签页后存储的状态会自动清除
• 执行删除操作时，需要同步将被删除行的ID从expandedRowIds中移除，再更新本地存储，避免无效ID残留
• 行数据必须存在唯一标识字段（如id），否则无法准确匹配恢复对应行的展开状态

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