如何处理多个单选按钮 - Angular

Question

这里我有一个是或否问题的列表，并提供单选按钮来选择是或否。并且我提供用户单独回答每个问题，并提供两个按钮，即全部是和全部否。

个人选择很好，但单击按钮选择全部是或全部否我不知道绑定以及如何收集每个问题的值。

<div *ngFor="let queestion of questionsList; let i=index; ">
	<label>
			{{question.id}} 
		<input type="radio"  [name]='i+1'>
			<span>Yes</span>
		<input type="radio"   [name]='i+1' >
			<span>No</span><br>
	</label>
</div>
<div style="text-align: center">
	<button type="button">All Yes</button>
	<button type="button">All No</button>	
	<button type="button">Submit</button>
	<button type="button">Clear</button>	
</div>

Answer 1

为单选按钮设置[value] 属性，而不是使用ngModel 进行双向绑定，并将isSelected 之类的属性添加到您的模型中，以便为所有类似的东西设置真/假

<div *ngFor="let question of questionsList; let i=index; ">
    <label>
            {{question.id}} 
        <input type="radio" [value]="true" [(ngModel)]="question.isSelected"  [name]='i+1'>
            <span>Yes</span>
        <input type="radio" [value]="false" [(ngModel)]="question.isSelected"  [name]='i+1' >
            <span>No</span><br>
    </label>
</div>

在你的组件中

selectAll(){
    this.questionsList.forEach(i=>{
      i.isSelected=true;
    })
  }

  unSelectAll(){
    this.questionsList.forEach(i=>{
      i.isSelected=false;
    })
  }

Demo

Answer 2

首先将按钮类型更改为类型标记。然后你可以为标签分配 id 和 value。

其他解决方案是您可以将更改或单击事件添加到按钮和单击方法，您可以发送一些值以在您的 javascript 中运行。

Answer 3

这只是一个使用单选按钮的示例

.HTML

<div class="form-check-inline">
    <label class="form-check-label">
    <input type="radio" class="form-check-input"  checked="!checked" name="radio"  [(ngModel)]="radio" [value]="true">active
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" 
                      checked="!checked"name="radio1"  [(ngModel)]="radio1" [value]="true">Deactive
  </label>
</div>
<button (click)="print( radio,radio1)"> shaa</button>

.ts

  radio=false;
radio1=false;
  print(){
  console.log(this.radio,this.radio1)
  this.radio = false;
  this.radio1 = false;
}

Stackbliz example