angular - *ngFor 中的 Angular 5 输入未正确填充内容

Question

我在这个项目中使用 Angular 5，并且这个对象属性中有一个大小为 5 的字符串数组，我想在 ngFor 中显示输入字段。

但是，当我开始在第一个输入文本上输入任何信息时，它会破坏我的文本并跳转到下一个字段，因此这意味着我无法完成我正在编写的文本。

这是一张图片来显示发生了什么。

当 db 中有数据时，它会正确显示在它注册的索引中，例如：这是我的 noSql 数据库上的文档：

这是检索数据的形式：

而且，由于它正确显示了信息，我认为正确定义了 ngModel 属性......我不知道为什么当我开始输入任何新文本时它会跳转到下一个输入。

这是我的代码：

<div class="form-group" *ngFor="let email of user.email; let i = index">
    <label class="form-control-label" for="input-name">Field {{i}}</label>
    <input type="text" class="form-control" [(ngModel)]="user.email[i]" />
</div>

标签： angularangular5

Answer 1

您的 ngFor 中没有 trackBy。因此，由于每次在数组中输入内容时都会更改数组的元素，Angular 会在数组中看到一个新字符串，销毁包含输入的 div 并重新创建它。由于输入在短时间内不存在，因此焦点转到下一个。

解决方案：trackBy：

trackByFn(index) {
  return index;
}

*ngFor="let email of user.email; trackBy: trackByFn; let i = index"

https://stackblitz.com/edit/angular-nw1uhp-vcce1s?file=src/app/app.component.html

其他解决方案：在数组中存储对象而不是字符串，并将电子邮件绑定到对象的属性。