флажок внутри ngFor, только первый флажок выбирается и снимается каждый раз при нажатии любого другого флажка

Question

У меня есть флажки внутри цикла ngFor, и когда я нажимаю на любой из этих флажков, только первый становится отмеченным и не отмеченным и обновляет только статус первого.

HTML-шаблон:

<div *ngFor="let num of count" class="m-b-20"> 
    <div class="checkbox"> 
        <input type="checkbox" id="check" name="num.value" value="num.checked" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/> 
        <label for="check"></label> 
    </div>
    {{num.checked}} 
</div>

Answer 1

У меня была похожая проблема в Angular 6 / Bootstrap 4. При нажатии на ярлык не будет установлен флажок. При нажатии на флажок, это будет работать, но при нажатии на ярлык, это не будет работать.

Размещение моего решения здесь для дальнейшего использования.

<ng-container *ngFor="let item of items">
     <div class="col-5 col-sm-5">
      <div class="form-group form-check">

        <!-- wrap the label around the checkbox -->
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" name="item_check" id="check_{{item.ID}}">
           {{item.name}}
        </label>
    </div>
   </div>
</ng-container>     

Так что, если вы заметили, мне пришлось обернуть флажок внутри этикетки.

Answer 2

Проверьте значение для name, вы использовали разные для каждого элемента: num.value.Это должно быть так же, чтобы оно работало:

<div *ngFor="let num of count" class="m-b-20">
    <div class="checkbox"> <input type="checkbox" name="checkbox-list" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/> 
    <label for="check"></label> </div>{{num.checked}}
</div>

checkbox-list - новое имя

Answer 3

Сначала удалите атрибут id и значение из вашего кода.

<div *ngFor="let num of count" class="m-b-20">
<div class="checkbox"> <input type="checkbox" name="checkbox-list" [(ngModel)]="num.checked" [checked]="num.checked==true" (click)="clicked(num)" ngDefaultControl/> 
<label for="check"></label> </div>{{num.checked}}

этот атрибут не нужен, если вы используете [(ngModel)] в поле. проверьте, что это будет работать нормально.

Answer 4

Я думаю, что у вас одно и то же имя для флажков.На итерации попробуйте присвоить чекбокс разные имена.Это будет работать.