Angular 6 - ngFor 中的 ngModel 正在更新数组中的每个项目答案

【问题标题】：Angular 6 - ngModel in ngFor is updating every item in arrayAngular 6 - ngFor 中的 ngModel 正在更新数组中的每个项目
【发布时间】：2018-05-16 02:55:28
【问题描述】：

几周前我开始学习 Angular 6，所以我还是新手。

我一直在尝试更新对象数组中的双向绑定字段。

这是我在

中初始化的数组

store.component.ts：

store_list = [{
    Address1: 'add1',
    Address2: 'test',
    City: ''
},{Address1: 'aaaa',
    Address2: 'bbbb',
    City: 'cccc'}];

    trackStore(index: number, obj: any): any {
    return index;
}

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_list[i].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>

我尝试将两种不同的方式绑定到 ngModel 以查看其中一种是否可行。不过，它们的行为方式相同。

当我有 3 个商店的数组并在其中任何一个商店上更新地址 1 或地址 2 时，所有 3 个商店地址 1 字段都会更新。

大部分在线研究得出了 3 个解决方案，但迄今为止都没有奏效。

在“名称”属性中包含索引以获得唯一的字段名称。
使用 trackBy，我也尝试在 store_list 数组中使用唯一 id 并通过自定义 trackBy 函数返回它，但它不起作用。
不要在 ngFor 中使用 ngModel。

【问题讨论】：

尝试删除输入标签中的名称属性并仅使用。仅限[(ngModel)]="store.Address1"。因为 [(ngModel)] 本身包含 name 属性。
我试过这个并且得到以下错误：如果在表单标签中使用了ngModel，则必须设置名称属性或者必须在ngModelOptions中将表单控件定义为“独立”。示例 1：示例 2：我也试过 {ngModelOptions]="{standalone: true}" 并且错误消失了，但是编辑一个迭代会再次更新。
你能试试name="{{'store.'+i+'.address1'}}" 这个吗。
你确定吗？无法复制这个问题，我为此创建了一个堆栈闪电战stackblitz.com/edit/angular-cehugw
我认为循环内有表单标签导致错误您可以尝试在表单标签中使用i 设置Id属性。

标签： angular ngfor ngmodel

【解决方案1】：

在 for 循环中尝试这个并删除 *ngFor 中的 trackby： <input matInput [(ngModel)]="store.Address1" placeholder="Street Address" required> 因为 [(ngModel)] 本身包含 name 属性。请参阅此处的文档： (angular.io/api/forms/NgModel)

【讨论】：