Angular FormGroup将问题集中在按键上.不能输入超过 1 个字符

Question

我正在尝试迭代表单控件并尝试显示字段。这些字段可以毫无问题地显示，并且可以正确保存绑定值并显示输出。我面临的问题是，在这些字段上按键时，光标失焦并且无法输入超过 1 个字符。

我已经简化了项目并在下面创建了演示。添加了 2 个字段，1 个正在使用正常循环，另一个不处理控制循环。不知道出了什么问题。

https://stackblitz.com/edit/angular-ivy-ndnzjd

Answer 1

每次输入字段的值发生变化时，toArray(( 方法都会被调用，ngFor 中的所有元素都会再次被重新渲染，这就是为什么专注于输入输出的原因。

您可以通过在 ngFor 上使用 trackBy 函数来解决此问题。trackBy 函数将索引和当前项作为参数，需要返回此项的唯一标识符。

组件.html

<div *ngFor="let item of toArray(form.controls);trackBy:trackByIndex" class="form-row">not working
<input [formControlName]="mytestfield" [id]="mytestfield" />
</div>

组件.ts

trackByIndex(index,value){
return index;
}

例