Angular [(ngModel)] 在檢查條件的情況下檢查所有復選框

Question

我有一個帶有帳戶的復選框列表。 當我嘗試顯示帶有各種選中/未選中 boolean 值的列表時， [(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

當使用帶有 typeof 復選框 angular 的 ngModel 時，內部實現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

所以我找到了一個解決方案，盡管 boolean 值不同，但它選中/取消選中所有復選框的原因是它缺少[ngModelOptions]="{standalone: true}" 。 現在一切正常。 謝謝大家的答案。