时间戳

首页 > 解决方案 > Angular [(ngModel)] 会检查所有复选框，尽管检查条件

html - Angular [(ngModel)] 会检查所有复选框，尽管检查条件

问题描述

我有一个带有帐户的复选框列表。当我尝试显示具有各种选中/未选中布尔值的列表时，会全部选中/取消选中[(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真实性的项目。但是由于[checked]我失去了与我的组件的绑定，所以理论上我需要ngModel，但它的工作方式与[checked].

我的组件如下所示：

accountSetups: AccountSetup[] = [];

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

标签： htmlangulartypescript

解决方案

当使用带有 typeof 复选框角度的 ngModel 时，内部实现CheckboxControlValueAccessor以将 ngModel 与 dom 连接，因此您不需要选中属性来设置复选框状态。

试试这个：

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

推荐阅读