如何在角度 5 的 ngFor 的给定列表中一次只选择一个复选框？答案

【问题标题】：How Can i do Only one checkbox selected at a time in given list in ngFor in angular 5?如何在角度 5 的 ngFor 的给定列表中一次只选择一个复选框？
【发布时间】：2018-12-07 13:52:53
【问题描述】：

我只想在角度 5 的 ngFor 中一次选择一个复选框。我有以下代码。

<div class="form-check" style="margin-top:0;">
   <label class="form-check-label">
    <input class="form-check-input"  id="res{{restaurant._id}}" (change)="selectRestaurant(restaurant,i)" [checked]="restaurant.checked" type="checkbox">
        <span class="form-check-sign"></span>
    </label>
</div>

在我的组件中

selectRestaurant(restaurant: any, i: any) {
    if (restaurant) {
      restaurant.checked = !restaurant.checked;
    }
  }

那么对于给定列表中仅选中一个复选框的任何可能的解决方案？

【问题讨论】：

标签： checkbox angular5 ngfor

【解决方案1】：

您必须将带有 ngmodel 的复选框项绑定到 for 循环中的特定实例。您可以尝试使用 ReactiveForms。看一个例子https://stackblitz.com/angular/ayqnbvbkmpy

【讨论】：

【解决方案2】：

我看到了很多使用循环的例子。但是当复选框太多时，我认为这是个坏主意。我建议使用其他方式。

创建变量以包含复选框索引。

public checkboxIndex = 0; //default value for checking
public checkboxModel = [];

ngOnInit() {
 for (let i = 0; i < checkboxCount.length; i++) {
 this.checkboxModel.push({ name: `${i}`, enabled: false });
}

public checkboxChange(index) {
    if (this.checkboxIndex !== index) {
      this.checkboxModel[this.checkboxIndex].enabled = false;
    }
    this.checkboxIndex = index;
  }

//HTML
<div *ngFor="let checkbox of checkboxCount.length; let i = index">
 <input type="checkbox" [(ngModel)]="checkboxModel[i].enabled" 
 name="checkboxModel[i].name"
                (change)="checkboxChange(i)"> </input>
</div>

应该有帮助。如果我犯了一些错误，请纠正我。

【讨论】：