Angular中contentEditable输入框单次删除字符异常问题求助

你的问题出在两个核心点上：

1. 模板引用变量#name和组件的name变量重名，导致事件处理逻辑混乱；
2. 用插值{{name}}绑定可编辑单元格内容，每次变量更新会触发Angular重新渲染DOM，直接打乱光标位置，造成连续删除异常。

修正后的代码示例 #

HTML代码

<td [attr.contenteditable]="true" #nameEl (input)="updateName($event)">
</td>
<button (click)="save()">Save</button>

TS代码

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  name = "Enter Name";
  @ViewChild('nameEl') nameEl!: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    // 初始化可编辑单元格内容
    this.nameEl.nativeElement.innerText = this.name;
  }

  updateName(event: Event) {
    // 通过事件目标获取最新内容
    const target = event.target as HTMLElement;
    this.name = target.innerText;
  }

  save() {
    console.log(this.name);
  }
}

关键修复点说明 #

• 变量名区分：把模板引用变量改成#nameEl，避免和组件的name变量冲突，消除逻辑歧义；
• 避免插值绑定：改用ngAfterViewInit手动初始化单元格内容，防止Angular频繁重绘DOM破坏光标状态；
• 事件参数获取内容：通过$event事件对象获取编辑后的内容，确保数据同步的同时不干扰DOM渲染流程。

这样修改后，可编辑单元格就能支持连续删除、正常输入，光标位置也能保持稳定。

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