Angular [(ngModel)] проверяет все чекбоксы, несмотря на проверенное условие

Question

У меня есть список флажков с учетными записями. Когда я пытаюсь отобразить список с различными проверенными / непроверенными логическими значениями [(ngModel)] проверяет / снимает их все.

<tr *ngFor="let accountSetup of this.accountSetups">
      <td>
      <input type="checkbox"
      [(ngModel)]="accountSetup.isAvailable"
      name="accountSetup">{{accountSetup.name}}
      </td>
</tr>

Я вижу эту тему Angular ngModel проверяет все флажки , но это не помогло мне понять, как решить эту проблему в моем конкретном случае. Без ngModel флажки проверяются правильно в соответствии с полем isAvailable, но тогда связь с моим компонентом отсутствует. Как я могу решить эту проблему?

С [checked] вместо ngModel он работает нормально, проверяет только те элементы, которые имеют isAvailable true. Но с [checked] я теряю связь с моим компонентом, поэтому теоретически мне нужно ngModel, но он не работает так же, как [checked].

Мой компонент выглядит так:

accountSetups: AccountSetup[] = [];

ngOnInit() {
   this.agreementService.getAgreement(this.agreementId).subscribe(data => {
       this.accountSetups = data.accountSetups;
  }
}

Answer 1

При использовании ngModel с флажком typeof angular внутренняя реализация CheckboxControlValueAccessor для подключения ngModel с dom, поэтому вам не нужен проверенный атрибут для установки статуса флажка.

Попробуйте это:

<tr *ngFor="let accountSetup of this.accountSetups">
      <td>
      <input type="checkbox"
      [(ngModel)]="accountSetup.isAvailable"
      name="accountSetup">{{accountSetup.name}}
      </td>
</tr>

Answer 2

Итак, я нашел решение, причина, по которой он установил / снял все флажки, несмотря на различные логические значения, в том, что ему не хватало [ngModelOptions]="{standalone: true}". Теперь все работает как надо. Спасибо всем за ответы.