我正在使用Angular 7和Bootstrap4。我试图使单选按钮切换,但是单击两次时可以取消选中。就像显示的in this answer。这是my current implementation。
在我的示例中,您可以看到我可以在单击两次时取消切换按钮,但是我有一个新问题。我想有一个隔离行的实现。从某种意义上说,如果您要回答问卷,则可以在每一行中选择不同的答案,也可以将该行留空。
我的问题是:如何在每一行中选择一个不同的答案(按钮)或将该行留空?如何在代码中唯一地标识一行?
谢谢。
答案 0 :(得分:0)
更新: 它有点硬编码,但它是一个好的开始: .ts:
status: boolean = false;
option=""
option1=[false, false, false]
option2=[false, false, false]
option3=[false, false, false]
constructor(private renderer: Renderer2){}
data = [{
id:"1a",
One:"Yes-1a",
Two:"Maybe-1b",
Three:"No-1c"
},{
id:"2a",
One:"Yes-2a",
Two:"Maybe-2b",
Three:"No-2c"
},
{
id:"3a",
One:"Yes-3a",
Two:"Maybe-3b",
Three:"No-3c"
}
]
clickEvent1(i){
this.option = 'option1 : ' + this.option1
if(this.option1[i] == true){
this.option1[i] = false
}else{
this.option1[i] = true
}
this.option2[i] = false; this.option3[i] = false
}
clickEvent2(i){
this.option = 'option2 : ' + this.option2
if(this.option2[i] == true){
this.option2[i] = false
} else{
this.option2[i] =true
}
this.option1[i] = false; this.option3[i] = false
}
clickEvent3(i){
this.option = 'option3 : ' + this.option3
if(this.option3[i] == true){
this.option3[i] = false
}else{
this.option3[i] = true
}
this.option1[i] = false; this.option2[i] = false}
}
.html:
<div class="card" style="height:400px">
<div class="card-body no-gutters">
<div *ngFor="let radio of data" class="btn-group-toggle" data-toggle="buttons">
<div class="row">
<label class="btn btn-secondary col-4"
[ngClass]="option1 ? 'bbb' : ''">
<input (click)="clickEvent1()"
type="radio" name="options" id="option1">
{{radio.One}}
</label>
<label class="btn btn-secondary col-4"
[ngClass]="option2 ? 'bbb' : ''">
<input (click)="clickEvent2()"
type="radio" name="options" id="option2" autocomplete="off"> {{radio.Two}}
</label>
<label class="btn btn-secondary col-4"
[ngClass]="option3 ? 'bbb' : ''">
<input (click)="clickEvent3()"
type="radio" name="options" id="option3" autocomplete="off"> {{radio.Three}}
</label>
{{option}}
</div>
</div>
</div>
</div>
//对不起,我不知道如何将更改保存到stackblitz上:(
答案 1 :(得分:0)
最后,我找到了解决问题的可行方法。就这样:How to uncheck a radio button on its second click Angular 2+。
这是一个简单且可扩展的解决方案,效果很好。