我在此项目中使用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>
您在ngFor中没有trackBy。因此,由于您每次在数组中输入内容时都会更改数组的元素,因此Angular会在数组中看到一个新字符串,销毁包含输入的div并重新创建它。由于输入的内容暂时不存在,因此焦点转到下一个。
解决方案:跟踪依据:
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
其他解决方案:在数组中存储对象而不是字符串,并将电子邮件绑定到对象的属性。