html - hide 设置为 false 后聚焦输入

Question

因此，在单击编辑按钮后，我尝试将注意力集中在输入上。 edit 会将 hidden 设置为 false。为此我尝试了以下代码

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，因此我专注于输入的逻辑将不起作用。有没有办法集中输入

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()
      })
    }
  }