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

【问题标题】：How to increase/decrease the values of multiple inputs in Angular如何增加/减少Angular中多个输入的值
【发布时间】：2019-05-17 17:45:28
【问题描述】：

我需要提供可变数量的输入，并且它们中的每一个都需要具有相同的功能，以便在按键时增加其值并在它们获得焦点时减少其值（没有鼠标交互，只有键盘）。输入必须是 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;
          }
    }
}

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

【问题讨论】：

标签： angular typescript

【解决方案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 变量传递给该函数。

附带说明，如果您使用 keydown，用户第一次按下向上箭头时，当输入从 0 开始时，函数将在函数中得到 0（或实际上没有），但输入会显示1. 然后当他们再次按下向上键时，该函数将得到 1 作为值输入。我会考虑改用keyup。

【讨论】：