Angular ngForm 内的 ngModel 和数字数组

Question

我被困在一个问题上有一段时间了，我不明白为什么会这样。

我的组件中有一个 values: number[] = [10,10] 变量。当我修改第一个输入时，在 keyDown 上，它有时会将我的光标移动到下一个输入，或者失去焦点。

这是一个 Plunker 示例：https://embed.plnkr.co/N4PO5CNvn0WJChgNIo59/

edit : 当两个值相同时，光标移动到下一个输入。示例：10、10。如果我输入任何数字，焦点将传输到下一个输入。顺便说一句，我使用的是 Chrome 最新版本

Answer 1

我遇到了这个问题，幸运的是我记得如何解决它！

要解决这个问题，您需要定义一个自定义 trackBy 函数。

将此添加到您的 *ngFor 中：

*ngFor="let val of values; let i = index; trackBy: trackByFn"

在你的组件 TS 中：

trackByFn(index, item) {
  return index; // or item.id
}

刚刚在 plunkr 上测试过，效果很好！

Answer 2

使用以下代码。

    import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: "./app.component.html"
})
export class AppComponent {
    values: number[] = [10, 10];
    label: string;

    public updateValue(event, index) {
        this.values[index] = +event.target.value;
        console.log(this.values);
    }
}



<div class="field">
    <span *ngFor="let val of values; let i = index">
      <input type="number" [attr.name]="'test' + i" [value]="val" (change)="updateValue($event, i)" >,
    </span>
  </div>

Angular ngForm 内的 ngModel 和数字数组

Angular ngModel inside ngForm with number array

ngmodel

angular