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.И сделайте что-то вроде [check] = "yourmodel.isChecked" , оставьте значение по умолчанию свойства isChecked в вашей модели как false.

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

Answer 2

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

Answer 3

вы запускаете этот цикл для всех элементов в "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 4

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

Answer 5

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

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

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

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

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