Angular表格单选可编辑单元格实现：解决多单元格同时编辑问题

问题根源 #

当前实现中每个数据对象单独维护editing状态，同时indexEditing与selectedCell的组合逻辑没有做全局排他控制，导致点击多个单元格时，多个编辑组件会同时处于激活状态。

分步解决方案 #

1. 全局维护编辑状态 #

在组件类中新增两个变量，专门记录当前处于编辑状态的数据项和列名，替代原有分散的状态管理：

// 组件类内定义
currentEditingItem: EntitlementTransactionTemplateDto | null = null;
currentEditingColumn: string | null = null;

2. 重写编辑状态切换方法 #

修改editStatus方法（注意你当前TS中方法名为editDateTest，需与HTML的editStatus调用保持一致），确保每次点击时先关闭之前的编辑状态，再激活当前单元格：

editStatus(value: EntitlementTransactionTemplateDto, columnName: string) {
    // 点击同一单元格时切换编辑状态
    if (this.currentEditingItem?.id === value.id && this.currentEditingColumn === columnName) {
        this.currentEditingItem = null;
        this.currentEditingColumn = null;
        return;
    }
    // 关闭之前的编辑，激活当前单元格
    this.currentEditingItem = value;
    this.currentEditingColumn = columnName;

    // 触发聚焦
    setTimeout(() => this.focusOnEditCell(), 0);
}

3. 更新HTML中的编辑状态判断 #

将原有基于indexEditing和selectedCell的判断，替换为全局状态变量的校验：

<!-- sunsetDate列的编辑组件显示条件 -->
*ngIf="currentEditingItem?.id === data.id && currentEditingColumn === 'sunsetDate'; else viewSunsetDate"

<!-- status列的编辑组件显示条件 -->
*ngIf="currentEditingItem?.id === data.id && currentEditingColumn === 'status'; else viewStatus"

<!-- 同步更新editing-cell的样式判断 -->
[ngClass]="currentEditingItem?.id === data.id && currentEditingColumn === 'sunsetDate' ? 'editing-cell' : ''"

4. 处理失焦关闭编辑 #

完善blur方法，确保点击页面其他区域时自动关闭编辑状态：

blur() {
    this.currentEditingItem = null;
    this.currentEditingColumn = null;
}

5. 修复多单元格聚焦问题（可选） #

原有@ViewChild只能获取第一个匹配元素，无法在多单元格场景下正确聚焦，改用@ViewChildren实现精准聚焦：

import { ViewChildren, QueryList, ElementRef } from '@angular/core';

@ViewChildren('inputField') inputFields: QueryList<ElementRef>;

focusOnEditCell() {
    setTimeout(() => {
        // 通过td上的data-id属性匹配当前编辑项
        const targetInput = this.inputFields.find(el => {
            const parentTd = el.nativeElement.closest('td');
            return parentTd?.dataset.id === this.currentEditingItem?.id.toString();
        });
        targetInput?.nativeElement.focus();
    }, 100);
}

同时在HTML的td标签上添加标识属性：

<td (click)="editStatus(data, 'sunsetDate' , i)" data-id="{{data.id}}">

核心逻辑 #

通过全局唯一的状态变量管控当前编辑的单元格，替代每个数据对象独立维护状态的方式，从根源上保证同一时间只有一个单元格处于编辑模式。

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