angular6 数组遍历项进行双向绑定 丢失焦点 问题解决

欢迎来到Altaba的博客

学习angular6，漫长并充实的过程，今日发现一个问题

数组['aaa','bbb','ccc']遍历后，每个项都和input进行双向绑定，为什么改变input值，这个数组
里面的项（值变量）不改变；如果是[{a:'aaa'},{b:'bbb'},{c:'ccc'}],这样的项（引用型变量）
遍历后每个项进行双向绑定就可以实现表单改变项的值，数组也改变

办法总比困难多！

搜索资料和文献发现

方法1

[(ngModel)]="item[index] 

方法1确实能够解决绑定的问题，但是又发现另外一个问题，每次表单修改项的时候，表单只=值一旦改变，表单就丢失了焦点，很不友好，探索发现方法2

方法2

*ngFor="let value of values; trackBy:indexTracker"

indexTracker(index: number, value: any) {
    return index;
}

这种自定义trackBy的方式才是正确的路子，既保证了项的绑定，也能避免数组持续的从头遍历刷新，完美解决！
如果为大家解决了，别忘了给博主点个赞，或者去博主的github上给博主加颗心，感激不尽，GitHub地址