点击按钮时仅修改mat-table单行对应按钮的mat-icon如何实现？

核心问题是你当前用了全局变量控制所有行的图标状态，所有行共享同一个状态值，所以触发切换后所有行都会同步变化。要实现单行独立切换，只需要把状态绑定到单行数据维度即可，具体修改步骤如下：

方案1：给行数据新增状态字段（最直观易维护） #

• 第一步：给你的行数据接口/对象新增独立的图标状态属性，初始值设为false

// 原有行数据接口新增可选状态字段
export interface PeriodicElement {
  position: number;
  name: string;
  weight: number;
  symbol: string;
  isIconToggled?: boolean;
}

// 初始化数据源时给每一行都加上初始状态
const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', isIconToggled: false},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', isIconToggled: false},
  // 其余行数据同理初始化
];

• 第二步：修改模板的点击事件和图标绑定逻辑，绑定当前行自身的状态

<!-- 点击事件传入当前行的element对象，图标绑定当前行的isIconToggled属性 -->
<ng-container matColumnDef="action">
  <th mat-header-cell *matHeaderCellDef>操作</th>
  <td mat-cell *matCellDef="let element">
    <button mat-icon-button (click)="toggleIcon(element)">
      <mat-icon>{{element.isIconToggled ? '切换后的图标名' : '默认图标名'}}</mat-icon>
    </button>
  </td>
</ng-container>

• 第三步：实现切换方法，仅修改当前传入行的状态

toggleIcon(row: PeriodicElement): void {
  row.isIconToggled = !row.isIconToggled;
}

方案2：用独立集合存储状态（无需修改原有数据结构） #

如果不想改动原有行数据的接口定义，可以用Set存储已切换图标的行唯一标识：

// 组件内定义Set存储已触发切换的行ID，这里用position作为行唯一标识
toggledRowIds = new Set<number>();

toggleIcon(rowId: number): void {
  this.toggledRowIds.has(rowId) ? this.toggledRowIds.delete(rowId) : this.toggledRowIds.add(rowId);
}

模板绑定逻辑修改为：

<button mat-icon-button (click)="toggleIcon(element.position)">
  <mat-icon>{{toggledRowIds.has(element.position) ? '切换后的图标名' : '默认图标名'}}</mat-icon>
</button>

两种方案都可以实现仅点击的单行图标切换，你可以根据自己的业务场景选择。

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