PrimeNG表格数字单元格编辑输入字符即失焦问题求助

问题根源 #

输入时失焦且无法重新聚焦，本质是输入过程中触发了DOM的销毁与重建，常见原因包括：

• 数字字段的类型在输入时突变（比如从数字转为字符串），导致isNumberField返回false，模板从可编辑的<p-cellEditor>切换到不可编辑模板
• 动态列循环未加trackBy，导致列DOM频繁重渲染
• 条件判断逻辑不稳定，输入临时值时触发模板切换

具体解决方案 #

1. 稳定isNumberField判断逻辑
   避免输入过程中（比如输入空字符串、半输入状态）因值类型变化导致模板切换：

   isNumberField(value: any, fieldName: string): boolean {
       // 允许空值、数字类型，或可转为数字的字符串
       return value === null || 
              value === undefined || 
              typeof value === 'number' || 
              (!isNaN(Number(value)) && value.trim() !== '');
   }
   

2. 给动态列循环添加trackBy
   防止列DOM因数组变化意外重渲染：

   <ng-container *ngFor="let col of tableColumns; trackBy: trackColumn">
   

   组件类补充追踪方法：

   trackColumn(index: number, col: any) {
       return col.field; // 用唯一的字段名作为追踪标识
   }
   

3. 优化输入框配置
   给数字输入框指定type="number"，配合pKeyFilter确保类型稳定：

   <input
       pInputText
       [(ngModel)]="line[col.field]"
       class="p-inputtext-sm"
       type="number"
       pKeyFilter="num"
       [style.font-size]="'0.75rem'"
       [style.font-weight]="'500'"
       style="float: right"
   />
   

4. 替换嵌套*ngIf为ngSwitch
   减少条件判断导致的DOM切换频率：

   <td [style.width]="col.width" [pEditableColumn]="col.field">
       <ng-container [ngSwitch]="isNumberField(line[col.field], col.field)">
           <p-cellEditor *ngSwitchCase="true">
               <!-- 原编辑器输入/输出模板内容 -->
           </p-cellEditor>
           <ng-template *ngSwitchDefault>
               <!-- 原nonEditable模板内容 -->
           </ng-template>
       </ng-container>
   </td>
   

5. 检查formatValue方法
   确保该方法仅返回格式化后的字符串，不修改原始line[col.field]的值，否则会触发不必要的变更检测。

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