Входной номер теряет фокус при изменении - PullRequest
0 голосов
/ 06 июня 2019

Я пытаюсь увеличить значение моей программы, используя введенный номер.По причинам, мне нужно, чтобы мое значение всегда было равно значению на входе.Мои действия в основном выполняются value = inputValue.

Мне удалось получить значение Input с помощью @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));
}

1 Ответ

0 голосов
/ 06 июня 2019

Возможно, проблема в том, что ngFor снова будет рисовать элементы списка, если только вы не установили функцию trackBy. Поскольку ваш div был перерисован, ввод тоже будет, и это означает, что вы потеряете фокус, потому что элемент был изменен.

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

Также было бы неплохо добавить время отката, чтобы не отправлять действия, если пользователь не перестал печатать.

Когда @ViewChild используется в * ngFor, он получит доступ к первому элементу списка. @ViewChildren можно использовать для доступа ко всем элементам.

Угловой видДети для динамических элементов внутри ngFor

...