Angular 输入更改值数组聚焦下一个元素并放置与前一个元素相同的值

Question

我正在尝试通过将大输入拆分为单个小输入并使用 keyup 填充大输入来管理大输入，但由于某种原因，当我触发 keyup 事件时，光标会转到下一个小输入并复制该值.大输入正确更改和更新，但小输入有问题。我也尝试从 editValue 函数返回大值，但结果相同

html:

<div class="form-group">
    <label for="prova">Prova input array</label>
    <input type="text" class="form-control form-control-sm" id="prova" placeholder="prova" [(ngModel)]="bigvalue" name="prova" maxlength="100">
</div>
<div class="d-flex flex-row" style="overflow-x: auto">
    <div *ngFor="let val of bigvalue | arrayfromstring; let i = index;" class="ml-4 my-3">
        <label for="value{{i}}">val{{i}}:</label>
        <input type="text" class="form-control form-control-sm" id="value{{i}}" name="inputarrayvals" value="{{val}}" (keyup)="editValue(i, $event, bigvalue)" maxlength="1">
    </div>
</div>

ts:

bigvalue = "00000000000000000000000000000000000000000000000"
editValue(i, val, item) {
    var vals = item.split('')
    if (val.target.value.length > 0)
        vals[i] = val.target.value
    this.bigvalue = vals.join('')
}

用于填充小值的管道 arrayfromstring:

import{ Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'arrayfromstring'
  })
  export class ArrayFromStringPipe implements PipeTransform {
    transform(string: any) {
          return string.split('');
      }
}

Answer 1

这可能是因为您按住 Shift 键输入数字。

他们会为您的数字键和 shift 键触发 keyup 事件。

尝试使用小键盘，或者在这样做之前锁定 shift 键？

否则，在您的函数中应用条件以过滤 non-numerci 个键。

Answer 2

你只需要一个trackBy函数

<div *ngFor="let val of bigvalue | arrayfromstring; let i = index; trackBy: trackByFn" class="ml-4 my-3">

  trackByFn(index: number, obj: any) {
    return index;
  }

人们说这是为了性能，但它也是为了处理原始值数组。

ngFor 指令设置为使用对象数组。当它生成 html 个节点时，它将对象作为键附加到每个节点，这就是它在 DOM 中找到它们的方式。假设上面的 trackBy 函数使用索引作为键。

ngFor 在传入原始值数组且没有 trackBy 函数时似乎完全被破坏了。当包含 trackBy 函数时，他们似乎使用了完全不同的代码。

事实上，将任何函数传递给 trackBy 都会修复奇怪的行为，即使是空函数。

trackByFn() {}

或

trackByFn() {
  return 'Angular devs please explain';
}

两者都有效。

重现此问题的最简单方法如下：

export class OneComponent {
  array = '000000'.split('');
}

<div *ngFor="let val of array; let i = index">
  <input [(ngModel)]="array[i]" />
</div>

并尝试输入输入。

我将此报告为一个错误，因为我认为它很糟糕

https://github.com/angular/angular/issues/45647

Angular 输入更改值数组聚焦下一个元素并放置与前一个元素相同的值

Angular array of input change value focus next element and put same value as preceding one

angular

typescript

input