Функция родного элемента для фокусировки не работает

Question

Я пытался выполнить автофокусировку на элементе ввода при нажатии кнопки. Пожалуйста, посмотрите машинописный текст

@ViewChild('envFilter') envFilter: ElementRef;
onFilterSelect() {
    this.envFilter.nativeElement.focus();
}

На стороне HTML у меня есть следующее:

<div [ngClass]="isFilterVisible ? 'item item1' : 'item item1 hide'">
     <div [@filterAnimation]="isFilterVisible" class="filterWrapper">
          <input type="text" class="envFilter" [(ngModel)]="envFilterValue" (keyup)="envFilterChanged(envFilterValue)" #envFilter />
            <!-- {{ envFilter.focus() }} -->
      </div>
</div>

При использовании {{ envFilter.focus() }} Я могу сосредоточиться на поле, но я ' m не может сфокусироваться на других полях ввода

Пропущен небольшой бит HTML здесь

<div class="pull-right  filter-down filter-down-div item item2">
     <i *ngIf=" envs.length !=0" role="button" (click)="onFilterSelect(envFilter)" class="filter-icon fas fa-search"
            [ngClass]="{'active': isFilterVisible ,'disabled':!isFilterVisible}" role="button"></i>
</div>

Этот сегмент в основном представляет собой кнопку поиска, которая при нажатии вызывает предыдущий onFilterSelect () function

Что-то не так в моем коде. Почему не работает автофокус

Answer 1

Я не знаю, в этом ли ваша проблема, но помните, что если у вас есть ввод в * ngIf, вам нужно дать Angular «дыхание» (используя, например, setTimeout)

A простой пример, представьте, что у вас есть

<input *ngIf="visible" [(ngModel)]="variable" #myInput>
<button (click)="focus()">click</button>

У вас есть

  visible:boolean=false
  @ViewChild('myInput') myinput:ElementRef

Если вы напишите

  /**NO WORK***/
  focus()
  {
    this.visible=true;
    this.myinput.nativeElement.focus() //<--NOT YET in the DOOM
  }

, вам нужно написать что-то вроде

  focus()
  {
    this.visible=true;
    setTimeout(()=>{
        this.myinput.nativeElement.focus()
    })
  }

Этот setTimeout, сначала перерисовываем, а потом делаем фокус

Answer 2

Вы нигде не вызываете метод onFilterSelect. Вы хотели указать это вместо envFilterChanged в привязке (keyup)?