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

Question

在这里，我有是或否问题的列表，并提供单选按钮供用户单独选择每个问题的答案 - 还提供“全部是”和“全部否”两个按钮。

单独选择很好，但我不知道如何绑定“全是”或“全否”按钮并收集每个问题的值。

<div *ngFor="let question 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模型中的属性，为所有类似的东西设置 true/false

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

演示