角度:如何管理*ngFor中的单个复选框

Question

嗨，我显示了一个带有复选框的项目列表。

我希望用户只能单击其中一个项目的此复选框。它将取消选中之前选中的复选框。

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

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

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

Answer 1

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

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

您可以查看此演示，这可能会对您有所帮助

模板文件

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

类文件：

在列表中维护一个isChecked 属性item并将其绑定到input元素中的检查attribute，然后在使用更改处理程序(即onChange将触发(时change输入元素上绑定事件，然后迭代项目并重新初始化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'];
}
}