Javascript 在类型脚本中仅选择其中一个复选框时，请选中所有复选框

我有一个复选框列表。我用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>

{{controller.controllerDisplayName}
{{action.displayName}

但是当我选择其中一个时，所有的都被选中了

有什么问题吗？我怎样才能解决这个问题

编辑

单击标签查看我的问题。单击a1或a2或a3

---

为复选框添加

ngModel

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

---

查看您链接的stackblitz时，您似乎试图将选中状态绑定到文本字段（

action.name

）。这是真实的，将导致勾选所有复选框。相反，将一个

布尔值

字段添加到

动作模型

以绑定选中状态：

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

现在标签的问题是它们都引用相同的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>

{{action.displayName}

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

---

请在此处查看工作演示：

未工作。加载页面时，选中所有复选框是否可以创建一个stackblitz复制问题？@JasonWhite我更新问题仍然存在问题。单击a3以查看a1已被选中<代码>单击“标签不”复选框

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