时间戳

首页 > 解决方案 > 在测试应用程序中提交多个答案后，角度计算正确答案并显示在结果中

html - 在测试应用程序中提交多个答案后，角度计算正确答案并显示在结果中

问题描述

用户使用单选按钮提交多个答案选择后。如何实现结果功能，包括correctAns/totalQuestions合格或不合格的数量？例如，

HTML：

<div>
    <h2>Angular Exam using Model Driven Form</h2>
    <form [formGroup]="myForm" (ngSubmit)="getSelectedValues()">
        <div *ngFor="let q of allQuestions; let i = index">
            <p>{{i + 1}}. {{q.question}}</p>
            <input type="radio" #btn1  formControlName={{q.question}} value={{q.ans1}}>
            <span id="{{q.ans1}}" [ngClass]="{'highlight': selectedAnswers[i] && q.correctAns  === q.ans1, 'incorrect':btn1.checked && selectedAnswers[i] && q.correctAns  !== q.ans1 }">{{q.ans1}}</span> <br>
  
            <input type="radio" #btn2  formControlName={{q.question}} value={{q.ans2}}>
            <span id="{{q.ans2}}" [ngClass]="{'highlight': selectedAnswers[i] && q.correctAns  === q.ans2, 'incorrect':btn2.checked && selectedAnswers[i] && q.correctAns  !== q.ans2 }">{{q.ans2}}</span> <br>
  
            <input type="radio" #btn3 formControlName={{q.question}} value={{q.ans3}}>
            <span id="{{q.ans3}}" [ngClass]="{'highlight': selectedAnswers[i] && q.correctAns  === q.ans3, 'incorrect':btn3.checked && selectedAnswers[i] && q.correctAns  !== q.ans3 }">{{q.ans3}}</span> <br>
  
            <input type="radio" #btn4  formControlName={{q.question}} value={{q.ans4}}>
            <span id="{{q.ans4}}" [ngClass]="{'highlight': selectedAnswers[i] && q.correctAns  === q.ans4, 'incorrect':btn4.checked && selectedAnswers[i] && q.correctAns  !== q.ans4 }">{{q.ans4}}</span> <br>
        </div><br/>
        <input type="submit" value="Submit" [disabled]="myForm.invalid">
    </form>
  </div>

打字稿：

  selectedAnswers:Array<string>=[];
  getSelectedValues(){
    this.allQuestions.forEach(()=>{
      this.selectedAnswers = (<any>Object).values(this.myForm.value);
    })
    console.log(this.selectedAnswers);

    for (var i = 0; i < this.selectedAnswers.length; i++) {
      if(this.selectedAnswers[i] == this.allQuestions[i].correctAns)
      
    } 
  }
}

标签： htmlangulartypescript

解决方案

你需要选择正确的答案，所以你的getSelectedValues方法是这样的：

for (var i = 0; i < this.selectedAnswers.length; i++) {
      if(this.selectedAnswers[i] == this.allQuestions[i].correctAns)
      this.correctAnswers.push(this.selectedAnswers[i]);
}

在您的模板中：

<p *ngIf="correctAnswers"> Result: {{correctAnswers.length}} / {{allQuestions.length}}
    <span style="color:green" *ngIf="correctAnswers.length > 5"> passed </span>
    <span style="color:red" *ngIf="correctAnswers.length <= 5"> failed </span>
</p>

这是工作示例：StackBlitz

推荐阅读