javascript - 如何在 Angular 中创建多个单选组

Question

如何在出现问题时创建多个 radio ，您只需选择通过或失败。当您选择通过或失败

时，不会影响其他项目

例如:

第 1 项 - 您觉得怎么样？你会通过还是失败？ : *通过 * 失败

第 2 项 - 你的同学安娜会通过还是失败？ : *通过 * 失败

第 3 项 - 您最好的 friend 的成绩是通过还是失败？ : *通过 * 失败

Answer 1

Item.ts file

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 file

        <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

查看控制台以获取生成的最终结果。