在模式窗口中打开表单时如何将焦点移动到按钮？

我不明白为什么它不能正常工作。一切都很好，直到我将它添加input到模态窗口。如果是true，则一切正常：

但是，如果false，则窗口甚至不会出现（在控制台上它显示为好像它已经出现并且我按下了确定（即Enter））：

问题：为什么窗口没有出现时false？

main.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.less']
})
export class MenuComponent implements OnInit {

  constructor(private router: Router) { }

 elements = [
    {
      title: "Копия чека",
      src: "../../assets/test.png",
      items: [
        {
          title: "Копия чека",
          src: "../../assets/test.png",
          action: () => {
            //console.log("show");
            this.titleModal = "Сделать копию чека?";
            this.isShowedDialog = true;
            this.iconModal = "../../assets/info.png"

          },  
          callback: () => {
            console.log(this.resultDialog);
          }  
        },
        .........
      ]
  // для хождения по группам
  currentItemGroup: number = 1;
  maxItemGroup: number = this.elements.length;
  minItemGroup: number = 1;
  // для хождения по детям группы
  currentItem: number = 1;
  minItem:number = 1;
  maxItem: number;
  // в данный момент по группам ходим?
  isGroup: boolean = true;
  // настройки для модального диалогового окна
  titleModal;
  discriptonModal
  buttonArrayModal = [{title:'Ок',class:'btn-success'},{title:'Отмена',class:'btn-danger'}];
  widthModal = '40%';
  iconModal;

ngOnInit() {
    this.onKeyDown();
  }

  onKeyDown() {
    document.onkeydown = (e) => {
      if (e.key === 'F1') {
        e.preventDefault();
        return false;
      }
      this.maxItem = this.elements[this.currentItemGroup - 1].items.length;
      switch (e.keyCode) {
        case 13: {

          if (this.isGroup)this.goToItem();
          else {
            this.elements[this.currentItemGroup - 1].items[this.currentItem - 1].action();
          }
          break;
       }
     }
   }
 }

isShowedDialog:boolean = false;
  resultDialog:string;

  onDialogClick(result:string){
    this.resultDialog = result;
    this.isShowedDialog = false;
    this.onKeyDown();
    this.elements[this.currentItemGroup - 1].items[this.currentItem - 1].callback();
    this.refreshDialog();
  }

  refreshDialog(){
    this.titleModal = null;
    this.discriptonModal= null;
    this.buttonArrayModal = [{title:'Ок',class:'btn-success'},{title:'Отмена',class:'btn-danger'}];
    this.widthModal = '40%';
    this.iconModal = undefined;
  }

在 menu.component.html 中：

<app-dialog-window [title]="titleModal" [discription]="discriptonModal" [buttonArray]="buttonArrayModal" [width]="widthModal" [icon]="iconModal" [input]="{hasVisible: false}" (onClickButton)="onDialogClick($event)" *ngIf="isShowedDialog"></app-dialog-window>

和组件本身：

import { Component, OnInit, Input, Output , EventEmitter, AfterViewInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-dialog-window',
  templateUrl: './dialog-window.component.html',
  styleUrls: ['./dialog-window.component.less']
})
export class DialogWindowComponent implements OnInit,AfterViewInit {
  @Input() title = "Подтвердите действие";
  @Input() discription;
  @Input() buttonArray: Array<any>;
  @Input() width = '40%';
  @Input() icon;
  @Input() input;
  inputData:string;

  @Output() onClickButton:EventEmitter<string> = new EventEmitter<string>();

  currentTab = 1;
  minTab = 1;
  maxTab;

  constructor() {   }

  ngAfterViewInit(){
    if (this.input.hasVisible) $("input").focus();
    else {
      $("button")[0].focus();
    }
  }

  ngOnInit() {
    this.onKeyDown();
    this.maxTab = this.buttonArray.length;
  }

  onClick(element:any){
    this.onClickButton.emit(element.innerText);
  }

  onKeyDown(){
    document.onkeydown = (e) => {
      if (e.key === 'F1') {
        e.preventDefault();
        return false;
      }
      switch (e.keyCode) {
        //Enter
        case 13: {
          this.buttonArray.forEach(el => {
            if (el.title === "Ок")
            {
              console.log(this.input);
              if (this.input.hasVisible){
                this.onClickButton.emit(this.inputData);
              }
              else {

                this.onClickButton.emit(el.title);
              }
            }

          });
          break;
        }
        // backspace
        case 27: {
          this.buttonArray.forEach(el => {
            if (el.title === "Отмена")
            this.onClickButton.emit(el.title);
          });
          break;
          break;
        }
        //вверх
        case 38: {
          this.next();
          break;
        }
        //вниз
        case 40: {
          this.prev();
          break;
        }
      }
    }
  }

  next(){
    if (this.currentTab < this.maxTab) this.currentTab++;
  }

  prev(){
    if (this.currentTab > this.minTab) this.currentTab--;
  }

}

更新：

如果在

 ngAfterViewInit(){
    if (this.input.hasVisible) $("input").focus();
    else {
      $("button")[0].focus();
    }
  }

zakomentit //$("button")[0].focus();，然后出现窗口....但是在自动打开表单时如何将焦点转移到按钮上？