Angular实现Mat-Table点击编辑按钮显示输入框修改价格

核心思路 #

给每行维护一个编辑状态标记，点击按钮切换状态，根据状态显示价格文本或输入框，同时结合Angular表单控件实现数据的双向绑定与更新。

步骤1：组件类中添加状态管理与辅助方法 #

在组件的.ts文件里新增变量和方法，用来跟踪编辑状态、获取表单控件、切换编辑模式：

// 用键值对存储每行的编辑状态，键由分组索引+行索引组成，避免冲突
editingRows: { [key: string]: boolean } = {};

// 获取data表单数组的控件（保留你原有的方法）
getPartControls() {
  return (this.form.get('data') as FormArray).controls;
}

// 获取指定行的价格表单控件
getPriceControl(partIndex: number, positionIndex: number): FormControl {
  // 先拿到当前分组的表单组
  const partFormGroup = (this.form.get('data') as FormArray).at(partIndex) as FormGroup;
  // 再拿到该分组下的orderPositions表单数组
  const positionsFormArray = partFormGroup.get('orderPositions') as FormArray;
  // 返回对应行的price控件
  return positionsFormArray.at(positionIndex).get('price') as FormControl;
}

// 切换编辑/保存状态
toggleEditMode(partIndex: number, positionIndex: number) {
  const rowKey = `${partIndex}-${positionIndex}`;
  this.editingRows[rowKey] = !this.editingRows[rowKey];

  // 如果切换到编辑状态，把当前价格同步到表单控件
  if (this.editingRows[rowKey]) {
    const priceControl = this.getPriceControl(partIndex, positionIndex);
    priceControl.setValue(this.data.orderPositions[positionIndex].price);
  } else {
    // 如果切换到非编辑状态，把表单控件的值同步回数据源
    const priceControl = this.getPriceControl(partIndex, positionIndex);
    this.data.orderPositions[positionIndex].price = priceControl.value;
    // 这里可以按需添加表单验证、提交逻辑等
  }
}

步骤2：修改模板代码，根据状态切换显示内容 #

调整.html模板，用*ngIf控制价格文本、输入框的显示，同时修改按钮的点击事件和文本：

<form [formGroup]="form">
  <div formArrayName="data" *ngFor="let formGroup of getPartControls(); let partIndex = index">
    <!-- 必须包裹formGroupName，才能正确绑定表单组内的控件 -->
    <div [formGroupName]="partIndex">
      <mat-table [dataSource]="data.orderPositions">
        <ng-container matColumnDef="relevance">
          <mat-header-cell *matHeaderCellDef>price</mat-header-cell>
          <mat-cell *matCellDef="let element; let positionIndex = index">
            <!-- 非编辑状态显示价格文本 -->
            <span *ngIf="!editingRows[`${partIndex}-${positionIndex}`]">
              {{ element.price }}
            </span>
            <!-- 编辑状态显示绑定了表单控件的输入框 -->
            <input 
              *ngIf="editingRows[`${partIndex}-${positionIndex}`]" 
              matInput 
              type="number"
              [formControl]="getPriceControl(partIndex, positionIndex)"
            >

            <!-- 切换编辑/保存的按钮 -->
            <button (click)="toggleEditMode(partIndex, positionIndex)">
              {{ editingRows[`${partIndex}-${positionIndex}`] ? '保存' : '编辑' }}
            </button>
          </mat-cell>
        </ng-container>

        <!-- 注意：必须添加表头行和数据行的渲染指令，否则表格不显示 -->
        <mat-header-row *matHeaderRowDef="['relevance']"></mat-header-row>
        <mat-row *matRowDef="let row; columns: ['relevance']"></mat-row>
      </mat-table>
    </div>
  </div>
</form>

关键注意事项 #

• 确保你的FormArray结构和data.orderPositions完全对应：每个data分组下的orderPositions必须是一个FormArray，且每个元素都包含price的FormControl。
• 用partIndex+positionIndex组合成唯一键，避免不同分组下的行索引重复导致状态混乱。
• 切换状态时同步表单控件和数据源，保证数据一致性。

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