取消选中单选按钮 Angular 7 Bootstrap 4答案

【问题标题】：Uncheck radio button Angular 7 Bootstrap 4取消选中单选按钮 Angular 7 Bootstrap 4
【发布时间】：2019-07-14 06:51:39
【问题描述】：

我正在使用 Angular 7 和 Bootstrap 4。我试图让单选按钮切换但可以在单击两次时取消选中。如图所示in this answer。这里是my current implementation。

在我的示例中，您可以看到我可以在单击两次时取消切换按钮，但我遇到了一个新问题。我想要一个隔离行的实现。从某种意义上说，如果您正在回答问卷，您可以在每一行中选择不同的答案，或者将该行留空。

我的问题是：如何在每一行中选择不同的答案（按钮）或将该行留空？如何唯一标识代码中的一行？

谢谢。

【问题讨论】：

标签： angular typescript bootstrap-4 radio-button

【解决方案1】：

更新：它有点硬编码，但它是一个好的开始： .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 上保存更改 :(

【讨论】：

谢谢，但这并不能回答我的问题。我已经更新了问题以使其更清楚......
你可以像这样在for循环中使用索引：
稍后如果我有时间我会更新我的答案
谢谢，但我找到了更好的可扩展解决方案。我真的很感谢你的帮助。谢谢。

【解决方案2】：

我终于找到了解决问题的有效方法。就是这样：How to uncheck a radio button on its second click Angular 2+。

这是一个简单且可扩展的解决方案，效果很好。

【讨论】：