Angular 7：点击表格列后自动聚焦输入框问题求助

我完全懂你这个痛点——点完单元格还要再点一次输入框才能编辑，确实挺影响操作体验的。你提到的模板引用变量+focus()思路本身是对的，问题出在输入框是在editable变为true后才刚渲染出来的，直接调用focus()的时候元素还没出现在DOM里，所以没效果。下面是具体的解决步骤：

步骤1：调整模板，给输入框加引用变量并优化编辑状态逻辑 #

先修改你的HTML模板，给matInput加上模板引用变量（比如#cellInput），另外注意你之前用的全局editable会导致所有行同时切换编辑状态，建议改成每个元素独立的编辑状态，这样逻辑更合理：

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="ID">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let elem" (click)="editCell(elem)" (keydown.enter)="editCell($event)">
      <span *ngIf="!elem.editable"> {{elem.ID}} </span>
      <mat-form-field *ngIf="elem.editable">
        <input #cellInput matInput [(ngModel)]="elem.ID">
      </mat-form-field>
    </td>
  </ng-container>
  <!-- 其他列的代码保持不变 -->
</table>

步骤2：在组件中实现自动聚焦逻辑 #

引入Angular的相关依赖，通过ViewChildren获取所有输入框的引用，切换编辑状态后等待DOM更新再触发聚焦：

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

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  dataSource = []; // 你的数据源

  @ViewChildren('cellInput') cellInputs!: QueryList<ElementRef<HTMLInputElement>>;

  constructor(private cdr: ChangeDetectorRef) {}

  editCell(item: any): void {
    // 处理Enter键退出编辑的逻辑
    if (item instanceof KeyboardEvent && item.keyCode === 13) {
      const currentEditingElem = this.dataSource.find(elem => elem.editable);
      if (currentEditingElem) currentEditingElem.editable = false;
      return;
    }

    // 先关闭其他行的编辑状态
    this.dataSource.forEach(elem => elem.editable = false);
    // 开启当前行的编辑状态
    item.editable = true;

    // 强制触发变更检测，确保输入框渲染到DOM中
    this.cdr.detectChanges();

    // 找到当前行对应的输入框并聚焦
    const targetInput = this.cellInputs.find(input => {
      return input.nativeElement.value === item.ID.toString();
    });
    if (targetInput) {
      targetInput.nativeElement.focus();
    }
  }
}

关键细节说明 #

• 变更检测的作用：调用cdr.detectChanges()是让Angular立即更新DOM，保证输入框已经渲染完成，这时候调用focus()才能生效。
• 独立编辑状态：把全局的editable改成每个元素的elem.editable，避免所有行同时进入编辑模式，这是表格单行编辑的常规逻辑。
• 数据源初始化：如果你的原始数据源没有editable属性，可以在初始化时给每个元素加上：

  this.dataSource = yourRawData.map(item => ({...item, editable: false}));
  

这样修改后，点击单元格就能直接激活输入框并自动聚焦，不需要再点第二次啦！

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