使用* ngIf的Angular6 AutoFocus

<div class="dropdownContainer" placeholder="test" (click)="ShowDropDown()"  />

<div #tref *ngIf="showDropDown == 1" class="dropdownList" (focusout)="HideDropDown()" style="border:1px solid black;" >this is my test</div>

单击dropDownContainer后，我希望出现dropdownList并将焦点放在上面。

我曾尝试使用

  @ViewChild("tref", {read: ElementRef}) tref: ElementRef; 

方法，但它返回undefined，因为在div单击上面的元素之前，该元素在DOM中不存在。如何自动聚焦于动态NON INPUT DOM对象？

编辑根据建议更新了我的代码，这仍然不会自动关注div。

  @ViewChild("tref") tref: ElementRef;
      ShowDropDown() {
      this.showDropDown = 1;
      this.tref.nativeElement.focus();
      console.log(this.tref);
  }
HideDropDown(){
  console.log('test out')
  this.showDropDown = 0;
}



<input   #tref class="dropdownContainer" placeholder="george" (click)="ShowDropDown()"  />
<div tabindex="-1" (focusout)="HideDropDown()" [hidden]="showDropDown == 0" class="dropdownList"  style="border:1px solid black;" >this is my test</div>

问题的答案有两个答案。

1）DIVS除非具有tabindex，否则不能具有焦点。堆叠答案

2）我需要包括，setTimeout(() => this.tref.nativeElement.focus(), 1);因为hidden尚未自动准备好接收焦点的元素。

3）* ngIf和hidden都起作用，一旦我完成上述修复

清理代码

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {

  constructor() {
  }

  showDropDown = 0;



  @ViewChild("tref") tref: ElementRef;
  ShowDropDown() {
this.showDropDown = 1;
setTimeout(() => this.tref.nativeElement.focus(), 1);
  }

HideDropDown(){
  this.showDropDown = 0;
}

test(){ console.log('works');}

}

<div tabindex="-2"    class="dropdownContainer" placeholder="george" (click)="ShowDropDown()"   ></div>
<div tabindex="-1" #tref [hidden]="showDropDown == 0" class="dropdownList"  style="border:1px solid black;" (click)="test()" (focusout)="HideDropDown()">this is my test</div>