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

学习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的方式才是正确的路子,既保证了项的绑定,也能避免数组持续的从头遍历刷新,完美解决!

posted @ 2020-12-24 16:55  敲代码的羔羊  阅读(118)  评论(0编辑  收藏  举报