*ngfor中的角度复选框

Question

  <div *ngFor="let option of RoleOptions">
    <input type="checkbox" class="k-checkbox" [(ngModel)]="option.Selected" style="width: auto">
    <label class="dialogLabels k-checkbox-label">{{option.Role.Name}}</label>
  </div>

<input type="checkbox" class="k-checkbox" [(ngModel)]="NewUserSendEmail" id="cbEmail" style="width: auto">
<label class="dialogLabels k-checkbox-label" for="cbEmail"> Email login data to the user</label>

首先，ngfor中的标签没有要关联的标识，也没有要查找的任何其他标识。然而，我没有发现任何需要id的东西，在剑道页面上有许多例子显示了没有id的复选框的例子，所以我不认为这是问题（但肯定可能是错误的）。

其次，它们在ngFor循环中。我不知道为什么这会把它搞砸，但这是我能想到的一切。我搜索了一下，但找不到任何关于这里的问题或如何解决它的东西。

你知道我哪里出了问题或者我没有看到什么吗？我确实记录了它绑定到的对象，值为true/false（不是null或未定义），所以这不应该是一个问题。不知道还能去哪里看...

    <div *ngFor="let option of RoleOptions">
      <label class="dialogLabels">
        <input type="checkbox" [(ngModel)]="option.Selected" style="width: auto">
        {{option.Role.Name}}</label>
    </div>

它工作，但显然没有剑道的外观。我如何才能得到一个与应用程序的其余部分相同外观的复选框的动态列表？

Answer 1

NgModel默认情况下不对复选框工作。

查看：Angular 2复选框双向数据绑定

您可以将您的值绑定到checked，并实现一个速记切换方法，如下所示：

<input
  type="checkbox"
  [checked]="option.Selected"
  (change)="option.Selected = !option.Selected"/>

<input
  type="checkbox"
  [(ngModel)]="option.Selected"
  [ngModelOptions]="{standalone: true}"/>