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

Question

我有一个有序表，在一个实体上有一个字段，您可以将其更改为"重新排名"表上的该行：

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

http://stackoverflow.com/questions/33955650 解释了为什么会这样。基本上，DOM 元素尚不存在，因此您可以使用setTimeout将带有.focus()的消息排队，以便 DOM 更新，然后进行.focus()调用。