Material Table行解耦问题：点击按钮仅展开对应行额外列

核心思路 #

问题出在你用了全局变量控制所有行的展开状态，改成给每行数据单独绑定展开状态就能实现独立控制。

具体步骤 #

1. 给每行数据添加展开状态属性
   在初始化数据源时，为每个数据项新增isExpanded字段，默认设为false（初始不展开）：

   // 假设你的原始数据数组是yourData
   this.dataSource = new MatTableDataSource(
     yourData.map(item => ({ ...item, isExpanded: false }))
   );
   

2. 编写行切换方法
   在组件中实现切换当前行展开状态的方法：

   toggleRow(row: any): void {
     row.isExpanded = !row.isExpanded;
   }
   

3. 模板中绑定行独立状态

   • 给“more”按钮绑定点击事件，传入当前行数据：

     <button mat-button (click)="toggleRow(row)">more</button>
     

   • 额外列用当前行的isExpanded控制显示：

     <!-- 示例额外列1 -->
     <ng-container matColumnDef="column3">
       <th mat-header-cell *matHeaderCellDef> Column 3 </th>
       <td mat-cell *matCellDef="let row" *ngIf="row.isExpanded"> {{row.column3}} </td>
     </ng-container>
     
     <!-- 示例额外列2 -->
     <ng-container matColumnDef="column4">
       <th mat-header-cell *matHeaderCellDef> Column 4 </th>
       <td mat-cell *matCellDef="let row" *ngIf="row.isExpanded"> {{row.column4}} </td>
     </ng-container>
     

原理说明 #

之前用全局变量时，所有行的ngIf都绑定同一个变量，所以点击任意按钮都会触发所有行的状态变化。现在每个行的展开状态存在自身数据对象中，切换时只会修改当前行的属性，实现各行独立控制。

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