嘿，我碰到过类似的nb-autocomplete聚焦问题，来帮你捋一捋！你之前的两种尝试没成功，主要是因为时机不对或者选择了错误的元素获取方式，下面给你具体的解决方案：

先分析你之前的问题 #

1. 直接用document.getElementById调用focus()无效：这大概率是因为nb-autocomplete在触发selectedChange后，内部会执行关闭下拉框等DOM操作，这些操作可能会覆盖你的聚焦动作，导致focus()没生效。
2. @ViewChild获取元素返回undefined：你用的@ViewChild('autocomplete-0')是找模板引用变量，但你的input里只设置了id="autocomplete-{{i}}"，并没有定义对应的模板引用变量；而且因为input是循环生成的，单个@ViewChild也无法获取多个元素，得用@ViewChildren。

具体解决方案 #

步骤1：给input添加模板引用变量 #

修改你的HTML代码，给input加上统一的模板引用变量（比如#autocompleteInput）：

<input type="text" nbInput placeholder="Destinations" autocomplete="off" 
       (input)="onDestinationsChange(i)" id="autocomplete-{{ i }}" 
       [nbAutocomplete]="destination" #autocompleteInput />
<nb-autocomplete #destination (selectedChange)="onDestinationSelectedChange($event, i)" >
  <nb-option *ngFor="let autocompleteDestination of autocompleteDestinations$ | async" [value]="autocompleteDestination" >
    {{ autocompleteDestination?.name }}
  </nb-option>
</nb-autocomplete>

步骤2：用@ViewChildren获取所有input元素 #

在组件类里导入并声明@ViewChildren，用来获取所有带#autocompleteInput引用的元素：

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

@Component({
  // 你的组件元数据
})
export class YourComponent {
  @ViewChildren('autocompleteInput') autocompleteInputs!: QueryList<ElementRef<HTMLInputElement>>;

  // 其他代码...
}

步骤3：修改onDestinationSelectedChange方法实现聚焦 #

在选中事件触发后，通过索引找到对应的input，延迟执行聚焦（确保nb-autocomplete的内部DOM操作完成）：

onDestinationSelectedChange(event: any, itineraryIndex: number) {
  // 先处理你原本的选中逻辑...

  // 获取所有input的数组
  const inputArray = this.autocompleteInputs.toArray();
  // 检查索引对应的元素是否存在
  if (inputArray[itineraryIndex]) {
    // 用setTimeout延迟执行，确保在nb-autocomplete的下拉框关闭后再聚焦
    setTimeout(() => {
      inputArray[itineraryIndex].nativeElement.focus();
    }, 0);
  }
}

备选方案：用NgZone确保在Angular变更检测内执行 #

如果setTimeout还是不行，可以尝试用NgZone来包裹聚焦操作，确保在Angular的变更检测周期内执行：

import { NgZone } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  constructor(private ngZone: NgZone) {}

  onDestinationSelectedChange(event: any, itineraryIndex: number) {
    // 原本的逻辑...

    const inputArray = this.autocompleteInputs.toArray();
    if (inputArray[itineraryIndex]) {
      this.ngZone.run(() => {
        inputArray[itineraryIndex].nativeElement.focus();
      });
    }
  }
}

这样修改后，应该就能在选择nb-autocomplete的选项后，保持对应的输入框处于聚焦状态了！

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