Angular表单行级编辑问题：点击修改按钮仅激活当前行而非全部行

你当前的问题是用了全局的toggleButton变量控制所有行的编辑状态，所以点击任意一行的修改按钮，所有行都会变成可编辑状态。要实现单行独立控制，需要把编辑状态绑定到每一行的数据项上，或者跟踪当前编辑的行索引，下面提供两种可行方案：

方案一：给数据项添加编辑状态属性（推荐） #

这种方案让每行数据自己管理编辑状态，支持同时编辑多行（如果后续有需求）。

1. 修改数据源初始化逻辑 #

确保你的dataSources中每个元素都带有isEditing属性，初始值设为true（对应初始不可编辑状态）：

// 假设你的数据源初始化代码类似这样
this.dataSources = yourData.map(item => ({
  ...item,
  isEditing: true // 初始不可编辑
}));

2. 更新模板（app.component.html） #

把全局的toggleButton替换为当前元素的isEditing属性，同时修改按钮的点击事件传递当前元素：

<table mat-table [dataSource]="dataSources[i]" class="mat-elevation-z0">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Nom</th>
    <td mat-cell *matCellDef="let element" matTooltip="{{ element.value }}" matTooltipClass="tooltip" matTooltipPosition="right">{{ element.name | summary: 20 }}</td>
  </ng-container>
  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef class="align-right">Valeur</th>
    <td mat-cell *matCellDef="let element" matTooltip="{{ element.value }}" matTooltipPosition="right" matTooltipClass="tooltip" class="align-right">
        <input type="text" [disabled]="element.isEditing" placeholder="{{ element.value }}" value="{{ element.value }}" >
        <button mat-icon-button title="Modifier" (click)="enable(element)" *ngIf="element.isEditing"><mat-icon>editer</mat-icon></button>
        <button mat-icon-button title="Enregistrer" (click)="save(element)" *ngIf="!element.isEditing"><mat-icon>done</mat-icon></button>
        <button mat-icon-button title="Annuler" (click)="disable(element)" *ngIf="!element.isEditing"><mat-icon>clear</mat-icon></button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="['name', 'value']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['name', 'value']"></tr>
</table>

3. 更新组件逻辑（app.component.ts） #

修改enable和disable方法，接收当前元素并修改其编辑状态：

enable(element: any) {
  element.isEditing = false; // 开启编辑
}
disable(element: any) {
  element.isEditing = true; // 关闭编辑
}

// 可添加保存逻辑
save(element: any) {
  // 这里写保存当前元素的逻辑，比如更新数据源、调用接口等
  element.isEditing = true; // 保存后关闭编辑状态
}

方案二：跟踪当前编辑的行索引 #

如果只允许同时编辑一行，可以用变量记录当前编辑的行索引：

1. 更新组件逻辑（app.component.ts） #

添加变量存储当前编辑索引，修改方法：

public currentEditIndex: number | null = null;

enable(index: number) {
  this.currentEditIndex = index; // 记录当前编辑的行索引
}
disable() {
  this.currentEditIndex = null; // 取消编辑
}

save(index: number) {
  // 保存逻辑
  this.currentEditIndex = null;
}

2. 更新模板（app.component.html） #

在*matCellDef中获取行索引，绑定状态到索引判断：

<table mat-table [dataSource]="dataSources[i]" class="mat-elevation-z0">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Nom</th>
    <td mat-cell *matCellDef="let element" matTooltip="{{ element.value }}" matTooltipClass="tooltip" matTooltipPosition="right">{{ element.name | summary: 20 }}</td>
  </ng-container>
  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef class="align-right">Valeur</th>
    <td mat-cell *matCellDef="let element; let index = index" matTooltip="{{ element.value }}" matTooltipPosition="right" matTooltipClass="tooltip" class="align-right">
        <input type="text" [disabled]="currentEditIndex !== index" placeholder="{{ element.value }}" value="{{ element.value }}" >
        <button mat-icon-button title="Modifier" (click)="enable(index)" *ngIf="currentEditIndex !== index"><mat-icon>editer</mat-icon></button>
        <button mat-icon-button title="Enregistrer" (click)="save(index)" *ngIf="currentEditIndex === index"><mat-icon>done</mat-icon></button>
        <button mat-icon-button title="Annuler" (click)="disable()" *ngIf="currentEditIndex === index"><mat-icon>clear</mat-icon></button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="['name', 'value']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['name', 'value']"></tr>
</table>

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