Angular 只允许选中一个复选框并获取选中的值
我现在只有两个复选框,我想实现什么? 如果您选中复选框,例如-值2(但您之前选中了值1),我想取消选中值1,只选择值2。如果要再次选择value1,请取消选中value2 我为我的问题准备了stackblitz 我想只允许选中一个复选框,然后禁用第二个复选框,但我也想取消选中此复选框,以便再次选中复选框。以下是代码:Angular 只允许选中一个复选框并获取选中的值,angular,typescript,Angular,Typescript,我现在只有两个复选框,我想实现什么? 如果您选中复选框,例如-值2(但您之前选中了值1),我想取消选中值1,只选择值2。如果要再次选择value1,请取消选中value2 我为我的问题准备了stackblitz 我想只允许选中一个复选框,然后禁用第二个复选框,但我也想取消选中此复选框,以便再次选中复选框。以下是代码: app.component.ts import { Component } from "@angular/core"; @Component({ sel
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular";
public checklist: any[];
constructor() {
this.checklist = [
{ id: 1, value: "value1", isSelected: false },
{ id: 2, value: "value2", isSelected: false }
];
}
isAllSelected(item) {
this.checklist.forEach(val => {
if (val.id == item.id) val.isSelected = !val.isSelected;
else {
val.isSelected = false;
}
});
}
}
app.component.html
<hello name="{{ name }}"></hello>
<div class="col-md-12 align-items-center">
<ul class="list-group">
<li class="list-group-item" *ngFor="let item of checklist">
<input type="checkbox" value="{{item.id}}" [checked]="item.isSelected"
(change)="isAllSelected(item)"/>
{{item.value}}</li>
</ul>
</div>
-
{{item.value}}
为什么不使用单选按钮?如果我想更改收音机的类型,我无法获得值?尝试更改堆栈?