Question

我正在使用Angular 7和Bootstrap4。我试图使单选按钮切换，但是单击两次时可以取消选中。就像显示的in this answer。这是my current implementation。

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

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

谢谢。

Answer 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上：（

Answer 2

最后，我找到了解决问题的可行方法。就这样：How to uncheck a radio button on its second click Angular 2+。

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

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

2 个答案: