Angular：如何管理 *ngFor 中的单个复选框答案

【问题标题】：Angular: how to manage a single checked box in a *ngForAngular：如何管理 *ngFor 中的单个复选框
【发布时间】：2019-12-06 18:14:17
【问题描述】：

您好，我已经显示了一个带有复选框的项目列表。

我希望用户能够仅针对其中一项单击此复选框。它将取消选中之前选中的复选框。

<tr *ngFor="let item of items>
 <td>
    <input type="checkbox value = "{{ item[i] }}">
  </td>
</tr>

我已经尝试了我所知道的一切，但我无法做到。如果我选中一个框，另一个框将保持选中状态。

1- 可以做我想做的事吗？ 2- 我该怎么办？

【问题讨论】：

代码可以，但如果只能选择一个选项，我建议使用单选按钮

标签： angular checkbox

【解决方案1】：

在这种情况下最好使用radio 按钮。

但您可以通过编程方式控制checkbox 的行为，因此一次只能选中一个复选框。

你可以看看这个demo，这可能对你有帮助

模板文件

<ul>
  <ng-container *ngFor="let item of items">
    <li>
      <input 
         type="checkbox" 
        [value]="item.value"
        [checked]="item.isChecked"
        (change)="onChange($event);"
        > {{item.label}}
    </li>
  </ng-container>
</ul>

类文件：

在item 列表中维护一个 isChecked 属性并将其绑定到检查input 元素中的attribute，然后在使用更改更改处理程序时在输入元素上绑定change 事件，即onChange 将触发，然后迭代在项目上并重新初始化 isChecked 属性期望当前检查项目。

items = [
      {'label': 'A', 'value': 'A', isChecked: false},
      {'label': 'B', 'value': 'B', isChecked: false},
      {'label': 'C', 'value': 'C', isChecked: false},
      {'label': 'D', 'value': 'D', isChecked: false},
      {'label': 'E', 'value': 'E', isChecked: false},
      {'label': 'F', 'value': 'F', isChecked: false},
      {'label': 'G', 'value': 'G', isChecked: false}
    ]; 

  onChange(event: any) { 
    const {checked, value} = event.target;
    let index = this.items.length;
    while(index--) {
       this.items[index].isChecked = value === this.items[index]['value'];
    }
  }

【讨论】：