Question

我现在已经坚持了一段时间了，我无法弄清楚为什么会这样。

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

以下是Plunker示例：https://embed.plnkr.co/N4PO5CNvn0WJChgNIo59/

编辑：当两个值相同时，光标移动到下一个输入。示例：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>

ngForm中的Angular ngModel，数字数组为

2 个答案: