如何通过更改输入数字字段在 Angular 5 中保持焦点？

Question

我有一个有序的 table，在一个实体上有一个字段，您可以将其更改为 "re-rank" table 上的那一行：

 <table>
  <thead>
    <th>Rank</th>
    <th>Name</th>
  </thead>
  <tbody>
    <tr *ngFor="let entity of entities">
      <td>
        <input *ngIf='entity === currentEntity' 
                value="{{entity.Rank}}" 
                type="number" 
                min="1"
                max="{{entities.length}}"
                (change)="updateRank(entity, $event)">
        <span *ngIf='entity !== currentEntity'>{{entity.Rank}}</span>
      </td>
      <td>
        <span>{{entity.Name}}</span>
      </td>
    </tr>
  </tbody>
</table>

所以数字输入仅适用于当前实体，并且在发生变化时，我在后端重新排列这些并更新 UI 上的排序。

效果很好，但问题是当您使用 箭头键 更改等级时，只有在降低等级时才会保留焦点。当您增加排名时，焦点将从输入框中移除。

JsFiddle：https://jsfiddle.net/JustinDao/t0hwLu4b/（尝试 Chrome 或 Firefox）

我认为这是由于 Angular 创建 DOM 元素的方式所致，但我不完全确定。有没有办法让我在提高排名时也能保持专注？

Answer 1

http://jsfiddle.net/JustinDao/mcu1tb90

解决方法是执行 setTimeout 以将焦点设置在 input 上。

将 input 对象传递到方法中：

<input #myInput
       *ngIf='entity === currentEntity' 
       value="{{entity.Rank}}" 
       type="number" 
       min="1"
       max="{{entities.length}}"
       (change)="updateRank(entity, $event, myInput)">

然后在updateRank

updateRank(entity, event, inputObject) {
    ....
    setTimeout(() => {
        inputObject.focus();
    });
}

解释了为什么会这样。基本上，DOM 元素尚不存在，因此您使用 setTimeout 将消息与 .focus() 排队，以便 DOM 更新，然后 .focus()已拨打电话。

如何通过更改输入数字字段在 Angular 5 中保持焦点？

How to preserve focus in Angular 5 with changing input number field?

focus

angular

angular5