Angular Material表格点击See More触发全部行同时切换如何解决

问题根源 #

你当前使用的show、buttonName都是组件全局变量，所有表格行共用这两个状态，只要修改就会同步作用到所有行，所以会出现点击一个按钮所有行同步切换的问题。

修复方案 #

推荐两种实现方式，按需选择即可：

方案1：直接在行数据中存储展开状态（实现最简单）

无需额外定义全局状态，直接把展开状态绑定到每行的element对象上：

1. 修改TypeScript代码
   删掉原有的全局show、buttonName变量，更新toggleText方法：

toggleText(element: any) {
  // 仅切换当前点击行的展开状态
  element.showDescription = !element.showDescription;
}

2. 修改HTML中描述列的代码

<!-- Description Column -->
<ng-container matColumnDef="description">
  <th mat-header-cell *matHeaderCellDef>Description</th>
  <td mat-cell *matCellDef="let element" id="description">
    <p *ngIf="element.showDescription">{{ element.description }}</p>
    <a mat-button href="javascript:void()" (click)="toggleText(element)">
      {{ element.showDescription ? 'Hide' : 'See More' }}
    </a>
  </td>
</ng-container>

方案2：独立存储展开状态（不修改原数据结构）

如果不想改动原数据源的结构，可以用Set存储已展开行的唯一标识（需要每行数据有唯一id字段，可自行替换成你实际的唯一字段）：

1. 修改TypeScript代码

// 定义存储已展开行ID的集合
expandedRowIds = new Set<number>();

toggleText(rowId: number) {
  if (this.expandedRowIds.has(rowId)) {
    this.expandedRowIds.delete(rowId);
  } else {
    this.expandedRowIds.add(rowId);
  }
}

2. 修改HTML中描述列的代码

<!-- Description Column -->
<ng-container matColumnDef="description">
  <th mat-header-cell *matHeaderCellDef>Description</th>
  <td mat-cell *matCellDef="let element" id="description">
    <p *ngIf="expandedRowIds.has(element.id)">{{ element.description }}</p>
    <a mat-button href="javascript:void()" (click)="toggleText(element.id)">
      {{ expandedRowIds.has(element.id) ? 'Hide' : 'See More' }}
    </a>
  </td>
</ng-container>

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