Angular 2表格行单独进入编辑模式问题咨询

这个问题我之前也碰到过！核心原因就是你用了一个全局的状态变量（比如isEditing）来控制所有行的编辑状态，所以一点击按钮，所有行都会跟着切换模式。要解决这个问题，关键是让每一行拥有独立的编辑状态标识，下面给你两种常用的解决方案：

解决方案1：给每个数据项添加独立的编辑状态属性 #

这种方法直接把编辑状态绑定到每一条数据上，逻辑简单直观，还支持同时编辑多行（如果你的需求允许的话）。

组件代码（TypeScript） #

首先，给你的数据数组里的每个对象添加一个isEditing属性，初始值设为false：

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html'
})
export class TableComponent {
  // 模拟表格数据，每个项新增isEditing状态
  tableData = [
    { id: 1, name: '张三', age: 25, isEditing: false },
    { id: 2, name: '李四', age: 30, isEditing: false },
    { id: 3, name: '王五', age: 28, isEditing: false }
  ];

  // 切换当前行的编辑状态
  toggleEdit(item: any) {
    // 可选：如果需要同一时间只能编辑一行，可以先关闭其他行的编辑状态
    // this.tableData.forEach(row => row.isEditing = false);
    item.isEditing = !item.isEditing;
  }

  // 保存编辑内容并退出编辑模式
  saveEdit(item: any) {
    // 这里可以添加你的保存逻辑，比如调用API更新数据
    console.log('保存数据:', item);
    item.isEditing = false;
  }
}

模板代码（HTML） #

在模板里根据item.isEditing的值，切换显示普通文本还是编辑用的输入框：

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableData">
      <td>{{ item.id }}</td>
      <td>
        <!-- 非编辑模式显示文本 -->
        <span *ngIf="!item.isEditing">{{ item.name }}</span>
        <!-- 编辑模式显示输入框，双向绑定数据 -->
        <input *ngIf="item.isEditing" type="text" [(ngModel)]="item.name">
      </td>
      <td>
        <span *ngIf="!item.isEditing">{{ item.age }}</span>
        <input *ngIf="item.isEditing" type="number" [(ngModel)]="item.age">
      </td>
      <td>
        <button *ngIf="!item.isEditing" (click)="toggleEdit(item)">更新</button>
        <button *ngIf="item.isEditing" (click)="saveEdit(item)">保存</button>
        <button *ngIf="item.isEditing" (click)="toggleEdit(item)">取消</button>
      </td>
    </tr>
  </tbody>
</table>

解决方案2：用单独变量记录当前编辑行的唯一标识 #

如果你不想修改原始的数据结构，或者需求是同一时间只能编辑一行，可以用这种方法：维护一个变量来记录当前正在编辑的行的ID（或者其他唯一标识）。

组件代码（TypeScript） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html'
})
export class TableComponent {
  // 原始表格数据，不需要修改结构
  tableData = [
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
    { id: 3, name: '王五', age: 28 }
  ];
  // 记录当前正在编辑的行ID，初始为null表示没有行在编辑
  currentEditingId: number | null = null;

  // 切换编辑状态：如果点击的是当前编辑行就关闭，否则切换到该行
  toggleEdit(itemId: number) {
    this.currentEditingId = this.currentEditingId === itemId ? null : itemId;
  }

  // 保存编辑内容
  saveEdit(item: any) {
    console.log('保存数据:', item);
    this.currentEditingId = null;
  }
}

模板代码（HTML） #

通过判断当前行的ID是否等于currentEditingId来切换显示模式：

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableData">
      <td>{{ item.id }}</td>
      <td>
        <span *ngIf="currentEditingId !== item.id">{{ item.name }}</span>
        <input *ngIf="currentEditingId === item.id" type="text" [(ngModel)]="item.name">
      </td>
      <td>
        <span *ngIf="currentEditingId !== item.id">{{ item.age }}</span>
        <input *ngIf="currentEditingId === item.id" type="number" [(ngModel)]="item.age">
      </td>
      <td>
        <button *ngIf="currentEditingId !== item.id" (click)="toggleEdit(item.id)">更新</button>
        <button *ngIf="currentEditingId === item.id" (click)="saveEdit(item)">保存</button>
        <button *ngIf="currentEditingId === item.id" (click)="toggleEdit(item.id)">取消</button>
      </td>
    </tr>
  </tbody>
</table>

两种方案都能解决你的问题，你可以根据自己的需求选择：如果允许同时编辑多行，选方案1；如果只能编辑一行且不想修改原始数据，选方案2。

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