1

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

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

1 回答 1

0

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

于 2018-05-16T03:20:21.263 回答