angular 双向绑定（遍历数组） 点击光标闪动失去焦点问题

 <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>