Question

我在Angular7中使用KendoUI，并试图获取具有绑定检查状态的复选框的动态列表。这是此列表的基本html：

  <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>

那很好，让我绑定并让我检查，等等。我只能看到2个差异。

首先，ngfor中的标签没有与标签相关联的ID，也没有其他可查找的内容。但是，我没有发现需要ID的任何内容，并且Kendo页面上有很多示例显示了没有ID的复选框的示例，因此我不认为这是问题所在（但肯定是错误的）。

第二，它们在ngFor循环中。我不知道为什么这会弄乱它，但这就是我能想到的。我在Google上四处搜寻，但在这里找不到任何问题或解决方法。

有什么想法我要去哪里或什么没看到吗？我确实记录了它绑定到的对象，并且值是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 Checkbox Two Way Data Binding

您可以将值绑定到checked，并实现如下所示的快捷切换方法：

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

或将ngModel与ngmodeloptions一起使用：

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

Answer 2

好吧，所以我仍然不确定为什么这种方式不能像我以前那样工作。无论我做了什么（甚至是复制样式），它似乎都没有响应点击并更改检查状态。但是，在Telerik / Progress的帮助下，我发现了另一种可行的方法。

* ngfor之外且正在使用的复选框使用id属性和标签的'for'属性进行关联。我最初没有看到对动态生成的对象执行此操作的方法，因为id不能是静态的，或者您有一堆具有相同id的项目。我确实尝试过使用{{}}出价来使ID唯一，但这没有用。但是我发现有一个[id]绑定可以正常工作。然后，我找到了标签的[htmlFor]绑定。结合使用它们似乎可以正常工作。

所以我的最终代码是：

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

希望它可以帮助其他人。如果有人对为什么第一个系统无法正常工作还有其他想法，我很想知道...

* ngFor中的角度复选框

2 个答案: