Question

我需要提供可变数量的输入，并且每个输入都需要具有相同的功能，以便在具有焦点时（无鼠标交互，只有键盘）增加其在向上键上的值并在向下键上减小值。输入必须为0到9之间的正数。框架为Angular 7。

我具有单输入工作的基本功能，如下面的代码所示。我已经看到了接近我需要的解决方案，但总是针对单个输入或使用单独的组件或使用jQuery。我正在寻找Angular / TS解决方案。这是一个原型，因此我可以根据需要随意更改代码。

HTML代码：

<input (keydown)="numberInput($event)" type="number" [(ngModel)]="offsetValue_1">
<input (keydown)="numberInput($event)" type="number" [(ngModel)]="offsetValue_2">
[...]
<input (keydown)="numberInput($event)" type="number" [(ngModel)]="offsetValue_5">

第一个输入的TS代码，显然我不想为每个'offsetValue_X'重复：

numberInput(event: KeyboardEvent) {
    if (event.which === this.KEY_UP) {
          if (this.offsetValue_1 < 9) {
              this.offsetValue_1 = this.offsetValue_1 + 1;
          }
    } else if (event.which === this.KEY_DOWN) {
          if (this.offsetValue_1 > 0) {
              this.offsetValue_1 = this.offsetValue_1 - 1;
          }
    }
}

提交表单时，每个输入都需要具有自己的值。显然，我想避免为每个输入重复相同的功能。

Answer 1

这应该有效：

<!-- HTML -->
<div *ngFor="let input of inputs; let i = index">
    <input [placeholder]="'Input ' + i" type="number" #numInput (keydown)="numberInput($event, numInput.value)" >
</div>

// TypeScript
numberInput(evt, val) {
    console.log(evt, val);
}

inputs可以是任何数组，可以让您循环浏览并在页面上放置可变数量的输入。使用模板变量#numInput将输入的值放入函数中。您也可以将索引的i变量传递给该函数。

作为旁注，如果您使用键盘按下键，则用户第一次按下向上箭头时，当输入从0开始时，该函数在该函数中将获得0（或实际上为零），但输入将显示1.然后，当他们再次按下向上键时，该功能将获得1作为输入值。我会考虑改用keyup。

如何增加/减少Angular中多个输入的值

1 个答案: