У меня есть список флажков. Я отображаю их в 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

1
kianoush 11 Апр 2019 в 11:39

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",
}
...

Проблема с метками теперь заключается в том, что все они ссылаются на один и тот же идентификатор, и что все флажки имеют одинаковый идентификатор. Чтобы убедиться, что метки выбирают правильные флажки, используйте индекс в вашем ngFor, чтобы сделать идентификаторы уникальными в 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 к идентификаторам ввода

Ознакомьтесь с рабочей демонстрацией здесь: Stackblitz

1
etarhan 11 Апр 2019 в 13:07

Добавить ngModel для флажка

<input type="checkbox" class="custom-control-input"  id="customControlAutosizing" [(ngModel)]="action.checkBox_property">
2
Sachila Ranawaka 11 Апр 2019 в 08:41