Angular Material Table可展开行：实现多行同时展开需求

你当前的问题是因为Angular Material Table官方示例默认用单个变量（比如expandedElement）跟踪展开行。每次点击新行时，这个变量会被新行对象覆盖，之前展开的行因不再匹配该变量，就会自动关闭。要实现多行同时展开，得把单个变量改成集合/数组来存储所有展开行的标记。

1. 替换跟踪变量 #

在组件类里，把原来的单个expandedElement替换成Set（推荐，判断存在性更高效）或者数组：

// 用Set存储展开的行对象（或行的唯一ID）
expandedElements = new Set<any>();
// 如果你的行有唯一ID，更推荐存ID，避免对象引用问题：
// expandedElementIds = new Set<number>();

2. 修改点击事件逻辑 #

点击行时，切换当前行的展开状态：已在集合里就移除（关闭），不在就添加（展开）：

toggleRow(element: any) {
  if (this.expandedElements.has(element)) {
    this.expandedElements.delete(element);
  } else {
    this.expandedElements.add(element);
  }
  // 用ID的写法：
  // const id = element.id;
  // this.expandedElementIds.has(id) ? this.expandedElementIds.delete(id) : this.expandedElementIds.add(id);
}

3. 更新模板中的展开判断 #

把模板里判断行是否展开的条件，从比较单个变量改成判断集合是否包含当前行：

<!-- 主行模板 -->
<tr mat-row *matRowDef="let element; columns: displayedColumns;" 
    class="example-element-row"
    [class.example-expanded-row]="expandedElements.has(element)"
    (click)="toggleRow(element)">
</tr>

<!-- 展开详情行模板 -->
<tr mat-row *matRowDef="let element; columns: ['expandedDetail']" 
    class="example-detail-row"
    [hidden]="!expandedElements.has(element)">
</tr>

• 用Set而非数组的原因：Set.has()的时间复杂度是O(1)，数组includes()是O(n)，数据量大时性能差异明显。
• 如果行对象可能因重新请求数据发生引用变化，建议存储行的唯一ID而非整个对象，避免因对象引用不同导致判断失效。

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