Angular中如何聚焦ngFor循环内的指定输入元素？

问题描述 #

在Angular项目中，选择「Name」字段的项目名称会触发MatDialog弹窗，弹窗流程结束后需要自动聚焦当前行的「Qty」字段。目前通过硬编码遍历DOM节点的方式实现聚焦：

e.target.form.children[1].children[0].children[1].children[0].children[0].children[3].children[0].children[0].focus();

这种方法完全依赖DOM结构，一旦页面布局调整就会失效。尝试过ViewChild但只能获取首尾元素，无法访问动态生成的中间行元素，急需符合Angular规范的稳定实现方案。

附相关模板代码：

<tbody>
    <div [formGroup]="voucherEntries" class="voucher-entries-container">
        <!-- Create Rows -->
        <tr 
            formArrayName='entries' 
            *ngFor="let control of entriesControls.controls; 
            let i = index"
            class="table-data">
            <td 
                [formGroupName]="i" 
                *ngFor="let header of headers; let headerIndex = index"
                [style.flex]="header.flex"
                [style.display]="header.display"
                >
                <div 
                    [id]="headerIndex+1" 
                    [tabIndex]="-1">
                    <input
                        [ngClass]="{'voucher-table-entry-error': this.voucherEntries.get('entries')?.get(i.toString())?.get(header.header)?.errors?.[404]}"
                        [tabindex]="header.skip" 
                        [id]="i" 
                        class="entries"
                        list="nameEntryList" 
                        [placeholder]="header.header"
                        [formControlName]="header.header"
                        (keyup)="[autoGenNextEntryRows($event), itemSearch($event), calculateTotalForSelectedRow($event), deleteEntry($event)]"
                        (focus)="resetNameEntryDropdownmenu($event)"
                        (keydown.escape)='removeFocus($event)' 
                        (change)="[selectOneItem($event)]"
                        (click)="selectText($event)" 
                        type="text">
                    <datalist *ngIf="entryFocus === 'name'" id="nameEntryList">
                        <option *ngFor="let item of itemData;"
                            [value]="item.desc.name + ' (' + item.total + ')'"></option>
                    </datalist>
                </div>
            </td>
        </tr>
    </div>
</tbody>

解决方案 #

步骤1：给输入框添加唯一标识和模板引用 #

修改模板中的<input>元素，添加唯一ID（结合行索引和字段名）和模板引用变量，确保能精准定位到目标元素：

<input
    #entryInput
    [id]="'entry-' + i + '-' + header.header"
    [ngClass]="{'voucher-table-entry-error': this.voucherEntries.get('entries')?.get(i.toString())?.get(header.header)?.errors?.[404]}"
    [tabindex]="header.skip" 
    class="entries"
    list="nameEntryList" 
    [placeholder]="header.header"
    [formControlName]="header.header"
    (keyup)="[autoGenNextEntryRows($event), itemSearch($event), calculateTotalForSelectedRow($event), deleteEntry($event)]"
    (focus)="resetNameEntryDropdownmenu($event)"
    (keydown.escape)='removeFocus($event)' 
    (change)="selectOneItem($event, i)" <!-- 直接传递行索引i -->
    (click)="selectText($event)" 
    type="text">

步骤2：用ViewChildren获取所有输入框引用 #

在组件类中通过ViewChildren获取所有带#entryInput模板引用的输入元素，它会自动跟踪动态生成的行：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  @ViewChildren('entryInput') entryInputs: QueryList<ElementRef<HTMLInputElement>>;

  constructor(private dialog: MatDialog) {}

  // 修改方法，接收当前行索引
  selectOneItem(event: Event, rowIndex: number) {
    const dialogRef = this.dialog.open(YourDialogComponent);
    
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        // 弹窗关闭后聚焦对应行的Qty字段
        this.focusQtyField(rowIndex);
      }
    });
  }

  // 聚焦指定行的Qty字段
  private focusQtyField(rowIndex: number) {
    // 根据唯一ID找到目标输入框
    const qtyInput = this.entryInputs.find(input => 
      input.nativeElement.id === `entry-${rowIndex}-Qty`
    );
    
    if (qtyInput) {
      qtyInput.nativeElement.focus();
    }
  }
}

关键说明 #

• 唯一ID：通过'entry-' + i + '-' + header.header确保每个输入框的ID唯一，即使动态添加/删除行也不会冲突
• ViewChildren：相比ViewChild，ViewChildren能获取所有匹配的元素，QueryList会自动响应视图变化，动态行的元素也能正确捕获
• 直接传递行索引：在(change)事件中直接传递当前行的i，避免从DOM中解析索引的额外开销，更可靠

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