如何强制关注 Nebular Select 元素？答案

【问题标题】：How to force focus on a Nebular Select element?如何强制关注 Nebular Select 元素？
【发布时间】：2020-12-27 14:39:35
【问题描述】：

我正在使用nb-autocomplete 组件，在选择一个值后，我需要将注意力集中在元素上。到目前为止我尝试过的一切都不起作用：

这是我的 HTML：

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

这是我在服务的onDestinationSelectedChange() 中的尝试：

const destinationElem = (document.getElementById(`autocomplete-${itineraryIndex}`) as HTMLInputElement);
destinationElem.focus();

结果：即使关闭了 chrome devtools，也没有任何反应*

我的另一个尝试是使用 NativeElement 并在其上调用 focus()：

@ViewChild('autocomplete-0', {static: false}) inputEl:ElementRef;
this.inputEl.nativeElement.focus()

但这会返回native element undefined

有人知道怎么做吗？

【问题讨论】：

标签： angular autocomplete nebular

【解决方案1】：

它有一个属性：focusInputOnValueChange

这里是documentation

【讨论】：

【解决方案2】：

试试

this.inputEl['hostRef'].nativeElement.focus();

【讨论】：