Angular嵌套mat-table无法实现多行同时展开问题如何解决

你写的数组切换逻辑本身没有问题，失败的核心原因是模板层的展开状态判断还是沿用了单一行展开的匹配逻辑，按以下步骤调整即可：

1. 调整组件类变量与逻辑 #

首先替换原来的单个展开元素变量为展开数组，同时保留你写的切换逻辑，新增行展开状态判断的辅助函数：

// 替换原来的单个展开变量定义
// 原代码：expandedElement: any | null;
expandedElements: any[] = [];

// 行点击切换逻辑（你的原有逻辑可直接复用）
toggleExpandRow(row: any): void {
  const index = this.expandedElements.findIndex(x => x.name == row.name);
  if (index === -1) {
    this.expandedElements.push(row);
  } else {
    this.expandedElements.splice(index, 1);
  }
}

// 新增辅助判断函数，判断当前行是否处于展开状态
isRowExpanded(row: any): boolean {
  return this.expandedElements.some(x => x.name === row.name);
}

注意：如果你的行数据中name字段不是唯一值，需要替换为id等全局唯一的主键字段做匹配，避免展开状态判断出错。

2. 修改模板层的状态绑定逻辑 #

找到原来控制行展开样式、子表格显示的判断代码，将原来的单元素匹配expandedElement === row替换为数组判断：

<!-- 父表格行绑定：替换原来的单变量点击赋值逻辑 -->
<tr 
  mat-row 
  *matRowDef="let row; columns: displayedColumns;"
  [class.expanded]="isRowExpanded(row)"
  (click)="toggleExpandRow(row)"
>
</tr>

<!-- 嵌套子表格的显示控制：替换原来的单元素匹配判断 -->
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']">
  <td mat-cell [colSpan]="displayedColumns.length" *ngIf="isRowExpanded(row)">
    <!-- 此处保留你原有的嵌套子表格代码 -->
  </td>
</tr>

调整完成后即可实现多行同时展开，已展开行不会被自动折叠的效果。

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