Angular 2: массив с флажком не работает должным образом

Question

Я связываю один массив с флажком. Тем не менее, когда я пытаюсь изменить атрибут bool для одного элемента массива, но он изменяется для всех элементов.

Мой HTML-компонент, как показано ниже.

<div class="col-sm-4" *ngFor="let karyalay of karyalayListFinal">
  <div class="checkbox-fade fade-in-primary">
    <label>
      <input formControlName="karyalay_group" type="checkbox" name="karyalaysCheckbox" value="{{karyalay.karyalayId}}" [(ngModel)]="karyalay.isChecked" 
      (click)="callEvents(karyalay.karyalayId)">
      <span>{{karyalay.karyalayName}}</span>
    </label>
  </div>
</div>

Теперь я пытаюсь изменить значение одного или выбранного элемента, как показано ниже.

for (let karyalay of this.karyalayListFinal) {
    let tempInd = _.findIndex(this.roleMasterEventList, {'KARYALAY_ID': karyalay.karyalayId});
    if (tempInd > -1) {
      this.karyalayListFinal[tempInd].isChecked = true;
    }
}

На самом деле, если tempInd > -1, то и только тогда значение этого элемента должно быть изменено. Но это меняется для всех.

Не знаете, это проблема ngModel или что?

Спасибо

Answer 1

Размещение тега ввода внутри *ngFor создаст несколько тегов ввода. И имя свойства для ввода должно быть разным для всех. В качестве HTML настройте изменения для входного свойства, используя свойство name. Таким образом, сделайте это свойство имени уникальным для каждого ввода, сохранив поле имени в модели, переданной в *ngFor. И целевое свойство проверено вместо ngModel. И сделайте что-то вроде[checked] = "yourmodel.isChecked", оставьте значение по умолчанию свойства isChecked в вашей модели как false.

Надеюсь, поможет.

Answer 2

Вы запускаете этот цикл для всех элементов в this.karyalayListFinal

for (let karyalay of this.karyalayListFinal) {
    let tempInd = _.findIndex(this.roleMasterEventList, {'KARYALAY_ID': karyalay.karyalayId});
    if (tempInd > -1) {
      this.karyalayListFinal[tempInd].isChecked = true;
    }
}

Возможно, что условие "tempInd> -1" выполнено для всех элементов в this.karyalayListFinal и, следовательно, все они изменяются.

Answer 3

Извините, но, похоже, ваш подход слишком сложен.

Я не знаю, когда вы вызываете это для каждого цикла, но я предполагаю, что вы уже знаете или у вас есть идентификатор, который вы ищете в данный момент. Давайте назовем это searchID,

Если вы хотите найти объект с соответствующим идентификатором, просто используйте для каждого цикла следующее:

this.karyalayListFinal.forEach( el =>  {
   if(el.karyalayId === searchID) {
      el.isChecked = true;
   }         
});

Это должно решить вашу проблему.

Answer 4

Я использовал [checked]="karyalay.isChecked" вместо ngModel в HTML-коде, и он начал работать.

Answer 5

Атрибут "name", записанный в поле ввода, должен быть уникальным для каждого элемента, созданного циклом. Вы должны связать id каждого объекта, поступающего в массив "karyalayListFinal", чтобы сделать их уникальными.