Question

几周前我开始学习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种解决方案，到目前为止还没有一种解决方案。

在＆＃34; name＆＃34;中包含索引属性具有唯一的字段名称。
使用trackBy，我也尝试在store_list数组中使用唯一ID并通过自定义trackBy函数返回它并且它不起作用。
不要在ngFor中使用ngModel。

Answer 1

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

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

1 个答案: