Angular 輸入改變值數組聚焦下一個元素並把相同的值放在前一個元素上

Question

我正在嘗試通過將大輸入拆分為單個小輸入並使用 keyup 填充大輸入來管理大輸入，但由於某種原因，當我觸發 keyup 事件時，cursor 會轉到下一個小輸入並復制該值。 大輸入正確更改和更新，但小輸入有問題。 我也嘗試從 editValue function 返回大值，但結果相同

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('')
}

Pipe arrayfromstring 用於填充小值：

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

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

Answer 1

你只需要一個trackBy function

<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指令設置為與 arrays 個對象一起使用。 當它生成 html 個節點時，它會將 object 作為鍵附加到每個節點，這就是它在 DOM 中找到它們的方式。 假設上面的 trackBy function 使用索引作為鍵。

ngFor在傳入原始值數組且沒有trackBy function 時似乎完全被破壞了。當包含 trackBy function 時，它們似乎使用了完全不同的代碼。

事實上，將任何 function 傳遞給 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

Answer 2

這可能是因為您按住 Shift 鍵輸入數字。

他們為您的數字鍵和 shift 鍵觸發了 keyup 事件。

嘗試使用小鍵盤，或者在這樣做之前鎖定 shift 鍵？

否則，將條件應用於您的 function 以過濾非數字鍵。