Select не отображает параметры при динамическом извлечении параметров

Question

HTML:
<select (focus)="onFocus()">
    <option *ngFor="let c of myDropDown">{{c}}</option>
</select>
<input [hidden]="myDropDown !=='two'"type="text">

Component:
onFocus() {
    this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(val => {
      console.log(val)
      this.myDropDown = val;
    })
  }

В фокусе выбора, я пытаюсь выбрать параметры, позвонив в службу поддержки, но почему-то раскрывающийся список не открывается, и мне нужно дважды щелкнуть.

Ссылка на StackBlitz: https://stackblitz.com/edit/angular-select-example-3jvz1h?file=app%2Fapp.component.ts

Answer 1

Измените html на это:

<select (mouseover)="onFocus" (focus)="onFocus()">
   <option *ngFor="let c of myDropDown" [value]="c.id">{{c.title}}</option>
</select>

, затем добавьте хук, используя OnInit:

ngOnInit(){
  this.onFocus()
}

Answer 2

Обычно вам не нужно использовать onFocus, так как вы хотите загрузить изначально, вы можете поместить вызов службы в конструктор и загрузить параметры следующим образом:

 constructor(private http: HttpClient) {
   this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(val => {
        this.myDropDown = val;
    });

 }

STACKBLITZ DEMO