Фокус на вводе после того, как скрытый установлен как ложный

Question

Поэтому я пытаюсь сосредоточиться на input после нажатия на кнопку button. edit установит hidden как ложное. Для этого я попробовал следующий код

editMyLink(i, currentState) {
    if (currentState == 'noEdit') {
      this.myLinkBody[i].value = this.myLinkBodyOriginal[i].value
      this.myLinkBody[i].currentState = 'edit';
      this.myLinkBody[i].buttonClass = "editButton"
    }
    else {
      this.myLinkBody[i].currentState = 'noEdit';
      this.myLinkBody[i].buttonClass = "noEditButton"
      let selector = '.myLinkEditInput:eq(' + i + ')'
      $(selector).focus()
    }
  }

<span *ngFor="let body of myLinkBody;let i=index;let last=last;" class="myLinkBody" [class.myLinkBodyLast]="last">
  
  <input class="myLinkEditInput" type="text" (keydown.enter)="saveMyLink(i)" [hidden]="body.currentState=='edit'" [(ngModel)]="body.value"/>
  
  <a [hidden]="body.currentState=='noEdit'"[href]="domainURL+body.href">{{body.value}}</a>
  
  <div id="editLinkButton"><a [class]="body.buttonClass" (click)="editMyLink(i,body.currentState)"></a></div>
  
  <div id="deleteLinkButton"><a (click)="deleteMyLink(i)"></a></div>

</span>

Я понял, что hidden изменится на true только после того, как функция будет выполнена, поэтому мои логики c для фокусировки на вводе не будут Работа. Есть ли способ сфокусироваться на входе

Answer 1

Проблема в том, что вам нужно «отдышать» на Angular - сначала Angular должен показать вход, а после того, как вы сфокусируете его - значит, вы используете setTimeout. В Angular вместо использования jQuery для получения селектора вы можете использовать переменную ссылки на шаблон, поэтому

<input #valueID ... [hidden]="body.currentState=='edit'" [(ngModel)]="body.value"/>
  ...
<!--see you pass the reference variable-->
<a [class]="body.buttonClass" (click)="editMyLink(i,valueID,body.currentState)"></a>
..

editMyLink(i,editID currentState) {
    if (currentState == 'noEdit') {
      this.myLinkBody[i].value = this.myLinkBodyOriginal[i].value
      this.myLinkBody[i].currentState = 'edit';
      this.myLinkBody[i].buttonClass = "editButton"
    }
    else {
      this.myLinkBody[i].currentState = 'noEdit';
      this.myLinkBody[i].buttonClass = "noEditButton"
      //here the "breath", well, the setTimeout
      setTimeout(()=>{
         editID.nativeElement.focus()
      })
    }
  }