Question

我有一个复选框列表。我正在这样的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。。 。 Smaple

Answer 1

为复选框添加ngModel

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

Answer 2

在查看您链接的堆栈闪电战时，您似乎试图将选中状态绑定到文本字段（ 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，因此请在输入ID后面附加 controller.controllerName + i

在此处查看有效的演示：Stackblitz

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

2 个答案: