Angular 5表格行编辑索引实现：仅激活选中行输入框

老哥，我太懂这个坑了！你现在的问题明显是用了一个全局的状态变量（比如edit）来控制所有行的显示隐藏，所以一点击所有行都跟着变了。好在你已经能正确拿到selectedRowID，那我们只需要把编辑状态和具体的行ID绑定起来就行，下面给你一步步拆解修改：

把原来的单个布尔值（比如isEditing）替换成存储当前正在编辑的行ID的变量，然后在模板里通过对比当前行的ID和这个变量，来决定是否显示输入框。这样只有ID匹配的行才会进入编辑状态。

1. 组件逻辑层（modal.ts / dashboard.ts） #

首先在组件类里新增一个变量，用来记录当前编辑的行ID：

// 初始化为null，表示没有行在编辑
currentEditingRowId: number | null = null;

然后修改你的编辑触发方法，把选中的行ID赋值给这个变量：

startEdit(rowId: number) {
  this.currentEditingRowId = rowId;
  console.log('Selected Row ID:', rowId); // 你的日志已经能拿到，这里确保赋值正确
}

// 可选：添加取消编辑的方法
cancelEdit() {
  this.currentEditingRowId = null;
}

// 可选：保存编辑后也要重置状态
saveEdit(rowId: number) {
  // 这里写你的保存逻辑，比如调用API更新数据
  this.currentEditingRowId = null; // 保存完成后退出编辑状态
}

2. 模板层（modal.html / dashboard.html） #

在表格的循环里，通过对比currentEditingRowId和当前行的ID，来切换普通文本和输入框的显示：

假设你原来的模板是这样的：

<tr *ngFor="let row of tableData">
  <td *ngIf="!edit">{{ row.columnName }}</td>
  <td *ngIf="edit"><input [(ngModel)]="row.columnName"></td>
  <td><i class="edit-icon" (click)="startEdit(row.id)"></i></td>
</tr>

修改成：

<tr *ngFor="let row of tableData">
  <!-- 显示普通文本：仅当当前行ID不等于正在编辑的ID时 -->
  <td *ngIf="currentEditingRowId !== row.id">{{ row.columnName }}</td>
  <!-- 显示输入框：仅当当前行ID等于正在编辑的ID时 -->
  <td *ngIf="currentEditingRowId === row.id">
    <input [(ngModel)]="row.columnName" />
    <!-- 可以在这里加保存/取消按钮 -->
    <button (click)="saveEdit(row.id)">保存</button>
    <button (click)="cancelEdit()">取消</button>
  </td>
  <td>
    <!-- 编辑图标只在非编辑状态显示，避免重复点击 -->
    <i class="edit-icon" *ngIf="currentEditingRowId !== row.id" (click)="startEdit(row.id)"></i>
  </td>
</tr>

如果你的行没有唯一ID，也可以用循环的index来代替（注意：如果表格有排序、删除操作，index可能会变化，优先用唯一ID）：

<tr *ngFor="let row of tableData; let i = index">
  <td *ngIf="currentEditingRowId !== i">{{ row.columnName }}</td>
  <td *ngIf="currentEditingRowId === i"><input [(ngModel)]="row.columnName"></td>
  <td><i class="edit-icon" (click)="startEdit(i)"></i></td>
</tr>

• 确保你的组件模块已经导入了FormsModule，否则[(ngModel)]双向绑定会失效（在app.module.ts里导入：import { FormsModule } from '@angular/forms';，然后加到imports数组里）
• 如果有多行同时编辑的需求，可以把currentEditingRowId改成数组，存储多个编辑中的行ID，模板里用includes判断：*ngIf="editingRowIds.includes(row.id)"

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