angular - 如何处理多个单选按钮 - 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>

标签： angularradio-button

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;
    })
  }

演示