Angular 6中ngFor内ngModel绑定致数组所有项同步更新问题求助

嘿，我完全懂你现在的困扰——刚学Angular没几周就遇到这种所有输入框同步变化的问题，确实挺闹心的。咱们先拆解下问题根源，再一步步解决它。

问题原因 #

你遇到的核心问题出在表单控件的name属性写法上。你用了name="store.{{i}}.address1"这种模板插值语法，但Angular在处理模板驱动表单的name属性时，这种写法并没有让每个输入框获得真正唯一的控件标识，导致所有输入框都绑定到了同一个ngModel上下文，所以修改一个就会同步所有。

另外，虽然你尝试了trackBy，但要知道trackBy的作用是优化*ngFor的渲染性能，避免不必要的DOM重绘，它和双向绑定的逻辑完全不相关，所以自然解决不了这个问题。

解决方案 #

只需要调整两个地方就能搞定：

1. 把name属性改成方括号绑定的动态值，确保每个输入框的name绝对唯一；
2. 直接用循环变量store来绑定字段，比通过数组索引store_list[i]更简洁可靠。

修改后的store.component.html代码如下：

<div *ngFor="let store of store_list; let i=index; trackBy: trackStore;">
  <mat-card class="store-card" mat-elevation-z8>
    <mat-card-content>
      <form class="example-form">
        <mat-form-field class="address-street">
          <input matInput [(ngModel)]="store.Address1" placeholder="Street Address" 
                 [name]="'store_' + i + '_address1'" required>
        </mat-form-field>
        <mat-form-field class="address-street">
          <input matInput [(ngModel)]="store.Address2" placeholder="Address Line 2" 
                 [name]="'store_' + i + '_address2'" required>
        </mat-form-field>
      </form>
    </mat-card-content>
  </mat-card>
</div>

为什么这样改有效？ #

• [name]="'store_' + i + '_address1'"这种动态绑定方式，会为每个循环项生成独一无二的name（比如store_0_address1、store_1_address1），Angular能准确识别每个输入框对应的表单控件，不会再出现绑定上下文混乱的情况；
• 直接用store.Address1绑定，因为store已经是当前循环的数组对象，不需要再通过索引去数组里取值，逻辑更清晰，也减少了出错的可能。

如果你之后想更专业地处理这类表单，也可以尝试Angular的响应式表单（Reactive Forms），用FormArray来管理数组型的表单控件，会更灵活也更易于维护，但目前上面的修改已经能完美解决你现在的问题啦。

内容的提问来源于stack exchange，提问作者Sung Chae