Angular 6 - ngModel в ngFor обновляет каждый элемент в массиве - PullRequest
Новая
       32

Angular 6 - ngModel в ngFor обновляет каждый элемент в массиве

0 голосов
/ 16 мая 2018

Я начал изучать 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. Включить индекс в атрибут «name», чтобы иметь уникальное имя поля.
  2. Используйте trackBy, я также пытался использовать уникальный идентификатор в массиве store_list и возвращать его через пользовательскую функцию trackBy, и она не работала.
  3. Не используйте ngModel в ngFor.

1 Ответ

0 голосов
/ 16 мая 2018

Попробуйте это в цикле for и удалите trackby внутри * ngFor: <input matInput [(ngModel)]="store.Address1" placeholder="Street Address" required> Потому что [(ngModel)] содержит сам атрибут name. Смотрите документацию здесь: (angular.io/api/forms/NgModel)

...