ngFor中的复选框，每次单击任何其他复选框时，只有第一个复选框被选中和取消选中

Question

我在ngFor循环中有复选框，当我单击任何一个复选框时，只有第一个被选中和取消选中，并且只更新第一个的状态。

网页模板 ：

<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

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

复选框列表是新名称

Answer 2

我认为您的复选框名称相同。在迭代时，尝试为复选框指定不同的名称。它会起作用。

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

我在 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 5

在输入标签中绑定id，在标签标签中绑定id。

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

Answer 6

问题是 id对于它们都是相同的，因此分别动态地向每行的 id 添加一些东西，然后它将起作用