当我在类型脚本中选择其中一个复选框时选择所有复选框

debugcn 发表于 Dev

基努什

我有一个复选框列表。我在 HTML 代码中显示它们，如下所示：

<div class="col-sm-12" *ngIf="ControllerModel">
  <div *ngFor="let controller of ControllerModel" class="panel col-md-6 col-lg-6 col-xs-6">
    <div class="panel-heading">
      <span>
          {{controller.controllerDisplayName}}
      </span>

    </div>
    <div class="panel-body">
      <div *ngFor="let action of controller.actionsVM" class="col-auto my-1">
        <div class="custom-control custom-checkbox mr-sm-2">
          <input type="checkbox" class="custom-control-input"  id="customControlAutosizing">
          <label class="custom-control-label"  for="customControlAutosizing">{{action.displayName}}</label>
        </div>
      </div>
    </div>
  </div>
</div>

但是当我选择其中之一时，所有这些都被选中。

有什么问题？我该如何解决这个问题？

编辑

单击标签查看我的问题。单击 a1 或 a2 或 a3 , 。. . 枫叶

埃塔汗

在查看您链接的 stackblitz 时，您似乎尝试将选中状态绑定到文本字段 ( action.name)。这是真实的，将导致所有复选框都被勾选。相反，boolean向您添加一个字段ActionModel以绑定选中状态：

export interface Actionmodel {
    displayName:string;
    name:string;
    isChecked:boolean; // Needed to bind the checked state
    metaData:string;
}

然后使用 ngModel 将选中状态绑定到您的模型：

<input type="checkbox" class="custom-control-input" id="customControlAutosizing" [(ngModel)]="action.isChecked">

并将的初始值设置isChecked为false，例如：

...
{
  displayName: "a1",
  name: "a1",
  isChecked: false,
  metaData: "a1",
}
...

现在标签的问题是它们都引用相同的 id，并且所有复选框也具有相同的 id。要确保标签选择正确的复选框，请使用 ngFor 中的索引使 id 在 div 中唯一：

<div *ngFor="let action of controller.actionsVM; let i = index" class="col-auto my-1">
  <div class="custom-control custom-checkbox mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="{{'customControlAutosizing' + controller.controllerName + i}}" [(ngModel)]="action.isChecked">
    <label class="custom-control-label" for="{{'customControlAutosizing' + controller.controllerName + i}}">{{action.displayName}}</label>
  </div>
</div>

编辑：由于您有两个带有复选框的 div，因此请附加controller.controllerName + i到输入 ID

在此处查看工作演示：Stackblitz

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。