Question

如何在有问题的情况下创建多重广播，您只需选择Passed或Failed。选择passed或failed

时，它不会影响其他项目

例如：

项目1-您如何看？你会通过还是失败？：*通过*失败

项目2-您的同学安娜会通过还是失败？：*通过*失败

第3项-您最好的朋友等级是及格或不及格？：*通过*失败

Answer 1

Item.ts文件

class Item{
  id : number;
  question : string;
  isPassed : boolean;
}

app.component.ts

export class AppComponent  {
items : Item[]=[];

 constructor(){
    console.log("onitnit")
    this.items.push({
      'id':1,
      'question': 'question1?',
      'isPassed':false,
    })
    this.items.push({
      'id':2,
      'question': 'question2?',
      'isPassed':false,
    })
    this.items.push({
      'id':3,
      'question': 'question3?',
      'isPassed':false,
    })
  }

  resultHandler(){
    console.log(this.items);
  }
}

app.component.html文件

        <div *ngFor = "let item of items" style="display : flex;">
           {{item.question}} 
           <form style="margin-left:20px">
              passed: <input type="radio" name="orders" [value]="item.id"/>
             failed: <input type="radio" name="orders" [value]="item.id"/>
           </form>
        </div>

working demo

请参见控制台以获取最终结果。

Answer 2

具有反应形式的多个无线电组。

HTML：

<form [formGroup]="form">
  <div *ngFor="let que of questions">
    <span>{{que.question}}</span>&nbsp;&nbsp;&nbsp;
    <mat-radio-group [formControlName]="que.id" aria-label="Select an option">
      <mat-radio-button value="true">Passed</mat-radio-button>
      <mat-radio-button value="false">Failed</mat-radio-button>
    </mat-radio-group>
  </div>
  <pre>{{form.value | json}}</pre>
</form>

TS：

form: FormGroup;

  questions = [{
    id: "1",
    question: "What do you think? you will pass or fail?",
    result: false
  },
  {
    id: "2",
    question: "Your classmate anna will be pass or fail?",
    result: false
  },
  {
    id: '3', 
    question: "Your best friend grade will be pass or fail?",
    result: false
  }]

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({ });
      this.questions.forEach(question => {
      this.form.addControl(question.id, this.fb.control(null, Validators.required));
      })
  }

stackblitz链接：https://stackblitz.com/edit/angular-pyfprq

Answer 3

为您的功能创建了一个示例

Stackblitz example

Answer 4

您可以为每个组设置唯一的名称属性。假设-

<input type="radio" name="{{index}}"/>

如何在角度创建多个无线电组

4 个答案: