如何在Angular8中实现表格指定行的单行内联编辑功能

1. 组件TS文件核心改动 #

首先在组件类中定义当前编辑行标识、响应式表单实例：

import { FormBuilder, FormGroup } from '@angular/forms';

export class YourComponent {
  currentEditingIdx: number | null = null;
  editForm: FormGroup;
  yearManagement = []; // 你的原数据数组

  constructor(private fb: FormBuilder) {
    // 初始化编辑表单，字段和表格列对应
    this.editForm = this.fb.group({
      policyTypeName: [''],
      quotes: [''],
      policyCT: [''],
      writtenPremium: ['']
    })
  }

  // 点击编辑按钮触发
  onEdit(index: number, rowData: any) {
    // 同一时间仅允许编辑一行，直接覆盖当前编辑索引
    this.currentEditingIdx = index;
    // 把当前行数据填充到表单
    this.editForm.patchValue(rowData);
  }

  // 保存编辑
  onSave() {
    if (this.currentEditingIdx === null) return;
    // 把表单最新值写回原数组
    this.yearManagement[this.currentEditingIdx] = {
      ...this.yearManagement[this.currentEditingIdx],
      ...this.editForm.value
    };
    // 退出编辑状态
    this.currentEditingIdx = null;
  }

  // 取消编辑
  onCancel() {
    this.currentEditingIdx = null;
    this.editForm.reset();
  }

  deleteCommitment(contact: any) {
    // 你的原有删除逻辑
  }
}

2. HTML模板改动 #

在循环时绑定索引，根据当前编辑索引切换展示态/编辑态：

<ng-container *ngFor="let contact of yearManagement; let i = index">
  <tr>
    <td></td>
    <td class="text-capitalize">
      <ng-container *ngIf="currentEditingIdx !== i">{{contact.policyTypeName}}</ng-container>
      <input *ngIf="currentEditingIdx === i" formControlName="policyTypeName" type="text" class="form-control">
    </td>
    <td>
      <ng-container *ngIf="currentEditingIdx !== i">{{contact.quotes}}</ng-container>
      <input *ngIf="currentEditingIdx === i" formControlName="quotes" type="number" class="form-control">
    </td>
    <td>
      <ng-container *ngIf="currentEditingIdx !== i">{{contact.policyCT}}</ng-container>
      <input *ngIf="currentEditingIdx === i" formControlName="policyCT" type="number" class="form-control">
    </td>
    <td>
      <ng-container *ngIf="currentEditingIdx !== i">{{contact.writtenPremium }}</ng-container>
      <input *ngIf="currentEditingIdx === i" formControlName="writtenPremium" type="number" class="form-control">
    </td>
    <td class="width125">
      <ng-container *ngIf="currentEditingIdx !== i">
        <button class="btn btn-outline-primary btn-table ml-1" title="Edit" (click)="onEdit(i, contact)">Edit</button>
        <button class="btn btn-outline-primary btn-table ml-1" title="Delete" (click)="deleteCommitment(contact)">Delete</button>
      </ng-container>
      <ng-container *ngIf="currentEditingIdx === i">
        <button class="btn btn-outline-success btn-table ml-1" title="Save" (click)="onSave()">Save</button>
        <button class="btn btn-outline-secondary btn-table ml-1" title="Cancel" (click)="onCancel()">Cancel</button>
      </ng-container>
    </td>
  </tr>
</ng-container>

注意事项 #

• 确保你的模块已经导入了ReactiveFormsModule
• 如果你的数据有唯一主键，可以用主键代替索引作为编辑行标识，避免数组排序/删除后索引错乱的问题

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