如何在angular中创建多选项组

Question

如何在有问题的情况下创建多个电台，您只需选择Passed或Failed即可。选择passed或failed时，不会影响其他项目

例如：

第一项--你怎么看？你会通过还是失败？：*通过*失败

第二题-你的同学anna会通过还是不及格？：*通过*失败

第三项-你最好的朋友的评分是通过还是不及格？：*通过*失败

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