*ngFor 中的 Angular 复选框答案

【问题标题】：Angular Checkbox in *ngFor*ngFor 中的 Angular 复选框
【发布时间】：2020-07-16 01:26:32
【问题描述】：

我将 KendoUI 与 Angular7 一起使用，并试图获取具有绑定检查状态的复选框的动态列表。这是此列表的基本 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 上四处搜索，但在这里找不到任何有关问题或解决方法的信息。

有什么想法我哪里出错了或者我没有看到什么？我确实记录了它绑定的对象，并且值为真/假（不是空或未定义），所以这不应该是一个问题。不知道还能去哪里看...

编辑

经过一番研究，这绝对与剑道风格有关。如果我这样做：

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

它有效，但显然没有剑道的外观。如何获得与应用其余部分外观相同的动态复选框列表？

【问题讨论】：

标签： angular kendo-ui angular7

【解决方案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}"/>

【讨论】：

为什么它会在上面的那个上工作，然后用于用户电子邮件？
我认为这可能与 ngFor 有关，因为 ngModel 在其中的行为不同。
不幸的是，这些都不起作用。仍然只是不让我检查任何东西。
最坏的情况是你创建一个不工作的剑道复选框并将样式复制到你自己的原生角度复选框。

【解决方案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>

希望它可以帮助其他人。如果有人对为什么第一个系统不起作用有任何其他想法，我很想知道...

【讨论】：