Angular矩阵输入框异常：输入多字符仅显首字符且光标消失

核心问题 #

在Angular中用*ngFor循环渲染二维数组的输入框时，未指定trackBy函数，导致每次修改输入框内容（更新数组元素）时，Angular会销毁并重新创建对应的input元素。输入第二个字符前，第一个字符触发的数组更新会触发变更检测，重建input组件，光标直接丢失，第二个字符无法被捕获，最终只显示第一个输入的字符。

解决步骤 #

1. 在组件类中添加trackBy函数
   该函数让Angular基于索引追踪循环项，而非元素的值或引用，避免不必要的DOM重建：

   trackByIndex(index: number): number {
     return index;
   }
   

2. 修改HTML中的*ngFor指令
   为两层循环都绑定trackBy：

   <span *ngFor="let row of matrix; let r = index; trackBy: trackByIndex">
     <p></p>
     <span *ngFor="let cell of row; let c = index; trackBy: trackByIndex">
       <input type="text" [(ngModel)]="matrix[r][c]" maxlength="3" size="3">
     </span>
   </span>
   

修改完成后，输入框更新内容时不会被重建，光标不会丢失，多字符输入可以正常显示。

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