时间戳

首页 > 解决方案 > 更改时输入数字失去焦点

angular - 更改时输入数字失去焦点

问题描述

我正在尝试使用输入数字增加我的程序的值。出于某种原因，我需要我的值始终等于输入中的值。我的动作基本上就是在做value = inputValue。

我设法使用 获取我的输入值@ViewChild，但是每次我更改它的值时，它都会失去焦点，我需要再次单击它。我不知道它为什么会发生以及如何解决它，希望你们能帮助我！（重构不是问题）

以下是我的代码的一个非常简化的版本。

<div *ngFor="let x of (myArray | async)">
 <input (input)="myFunction()" [value]="x.value" #myInput type="number">
</div>

@ViewChield('myInput') myInput: ElementRef
myArray: Observable<Array<Object>>;

myFunction() {
 this.store.dispatch(new Action(this.myInput.nativeElement.value));
}

标签： angulartypescriptinput

解决方案

问题可能是 ngFor 将再次绘制列表元素，除非您在那里设置 trackBy 函数。由于您的 div 已重绘，输入也将如此，这意味着您将失去焦点，因为元素已更改。

https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

此外，添加去抖动时间可能是一个好主意，以便除非用户停止输入，否则不会调度操作。

在 *ngFor 中使用 @ViewChild 时，它将访问第一个列表项。@ViewChildren 可用于访问所有项目。

ngFor 中动态元素的 angular viewChild

推荐阅读