如何实现Angular Material表格多行保持展开（点击自身才折叠）

我来帮你搞定这个需求！原来的官方示例用单个expandedElement变量控制展开状态，所以只能同时展开一行。要实现多行保持展开，仅点击自身才折叠的效果，我们只需要把单个变量改成数组来跟踪所有展开的行元素即可，具体实现步骤如下：

1. 组件类改造：用数组跟踪展开状态 #

首先在你的组件类中，把单个的expandedElement替换成一个数组，再写一个切换行状态的方法：

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

// 根据你的实际数据定义类型
interface YourDataType {
  // 你的数据字段，比如id, name等
  id: number;
  name: string;
  // 其他字段...
  detail: string;
}

@Component({
  selector: 'your-table-component',
  templateUrl: './your-table.component.html',
  styleUrls: ['./your-table.component.css']
})
export class YourTableComponent {
  dataSource = new MatTableDataSource<YourDataType>(/* 你的数据源 */);
  columnsToDisplay = ['id', 'name', /* 其他列 */];
  // 用数组存储所有展开的行元素
  expandedElements: YourDataType[] = [];

  // 切换行的展开/折叠状态
  toggleRow(element: YourDataType) {
    const index = this.expandedElements.indexOf(element);
    if (index > -1) {
      // 如果元素已在数组中，移除它（折叠行）
      this.expandedElements.splice(index, 1);
    } else {
      // 如果元素不在数组中，添加它（展开行）
      this.expandedElements.push(element);
    }
  }
}

2. 模板修改：绑定数组状态控制显示 #

接下来修改你的表格模板，把原来基于单个变量的判断改成数组的includes方法，同时把点击事件换成调用toggleRow方法：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 你的列定义，比如： -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- 展开详情列定义 -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail">
        <!-- 这里放你的详情内容 -->
        {{element.detail}}
      </div>
    </td>
  </ng-container>

  <!-- 表头行 -->
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>

  <!-- 主数据行：绑定展开状态和点击事件 -->
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" 
      class="example-element-row"
      [class.example-expanded-row]="expandedElements.includes(element)"
      (click)="toggleRow(element)">
  </tr>

  <!-- 详情行：仅当元素在展开数组中时显示 -->
  <tr mat-row *matRowDef="let element; columns: ['expandedDetail']" 
      class="example-detail-row"
      [style.display]="expandedElements.includes(element) ? '' : 'none'">
  </tr>
</table>

3. 样式调整（可选） #

保留原来的样式来优化展开/折叠的视觉效果，比如：

.example-element-row {
  cursor: pointer;
}

.example-element-row:not(.example-expanded-row):hover {
  background: whitesmoke;
}

.example-expanded-row {
  border-bottom-width: 0;
}

.example-detail-row {
  height: 0;
  overflow: hidden;
}

.example-element-detail {
  padding: 16px;
}

关键逻辑说明 #

• 数组跟踪状态：expandedElements数组存储所有当前展开的行元素，确保多行可以同时处于展开状态
• 切换方法：toggleRow方法通过判断元素是否在数组中，实现“点击展开，再次点击折叠”的逻辑
• 模板绑定：用expandedElements.includes(element)判断当前行是否展开，控制主行的高亮样式和详情行的显示/隐藏

这样改造后，你的表格就能实现点击行展开，再次点击折叠，其他行操作不影响已展开行的效果啦！

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