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

  • 相关阅读:
    鼠标拖动DIV移动
    JS中事件&对象
    响应式与弹性布局
    JS中的变量和输入输出
    JS中的运算符&JS中的分支结构
    HTML基本标签
    CSS基础语法
    JS中循环结构&函数
    String 二
    StringBuffer
  • 原文地址:https://www.cnblogs.com/junjun-001/p/14185009.html
Copyright © 2011-2022 走看看