如何使用 ngFor 在 Angular 9 中一次 select 只有一个复选框

Question

我正在将数据库中的数据显示到 Angular 9 中的一个复选框中，以便用户能够 select 一个或多个复选框，但我看到一个异常情况，如果我单击一个复选框，所有都得到selected 而不是我单击的那个。请对此有任何帮助吗？下面是我的代码..

<label for=" Option" *ngFor="let mc of  ChooseCriteria " class="form-control" >
        <input type="checkbox" name="Option" [value]="mc.id"  (change)='selectOption($event)' [(ngModel)]=" OptionValue" >{{mc.category}}<br> 
 </label>

Answer 1

发生这种情况是因为，您对所有复选框使用了相同的 ngModel，这将自动将 value(boolean) 绑定到所有输入，结果是 selecting 全部。要解决此问题，您应该为每个复选框使用单独的 ngModel。

示例：link

// component.
ChooseCriteria = [
  { category: "Fruits", id: 1, checked: false },
  { category: "Animals", id: 2, checked: false }
];

<div>
 <span>{{ ChooseCriteria | json }}</span>
 <label for=" Option" *ngFor="let mc of ChooseCriteria" class="form-control" > 
  <input type="checkbox" name="Option" [(ngModel)]="mc.checked"> 
  {{ mc.category }}
 </label>
</div>

如何使用 ngFor 在 Angular 9 中一次 select 只有一个复选框

how to select only one checkbox at a time in Angular 9 with ngFor

angular

angular8

angular9