<app-process-template-step-item *ngFor="let item of template.data.steps; let i = index;" [index]='i'
[(step)]="template.data.steps[i]" (addItem)="addStep($event)" (deleteItem)="deleteStep($event)" [defaultRole]="defaultRole"></app-process-template-step-item>
双向绑定单个值的时候没有出现问题
template.data.steps是一个数组,遍历数组进行双向绑定时,点击模态框时,光标闪动失去焦点,google通过trackBy解决问题
解决:在html中加入trackBy
*ngFor="let item of template.data.steps; let i = index;" [index]='i' trackBy:indexTracker
indexTracker(index: number, value: any) {
return index;
}
解决了闪动问题,但不知道为什么带来了一个新的问题。通过索引作为唯一标识trackBy又出现新的问题(表现为在页面中本应新增一行空行,却增加为一行结束行),通过return value.name却没有问题,但因为name不是唯一标识,所以只好改为两个单向绑定解决
<app-process-template-step-item *ngFor="let item of template.data.steps; let i = index;" [index]='i'
[step]="template.data.steps[i]" (addItem)="addStep($event)" (stepChange)="updateStep($event,i)"
(deleteItem)="deleteStep($event)" [defaultRole]="defaultRole"></app-process-template-step-item>