我正在做一個測驗模擬器應用程式，我想在單擊“顯示答案”按鈕后向我顯示當前問題的答案。我現在有點困惑，我創建了一個函式，它將所有問題的所有正確答案都記錄在 console.log 中，但我不知道如何在我的應用程式中插入它，以及如何為當前的每個問題進行插入。
順便提一句。對不起，我是新手，我在這里的第一篇文章
這是我的組件 html：
`<div >
<div >
<div class = "col-sm-8 offset-2">
<p class = "text-center">{{currentQuestion 1 }} of {{questions.length}} </p>
<h3>{{questions[currentQuestion].question}}</h3>
<div *ngFor="let question of questions[currentQuestion].answers">
<label appOptionBackground [correctAnswer]="question.correct" for="answersRadio">
<input type="radio" name="answersRadio" (change)="onAnswer(question.correct)" [disabled]="answerSelected">
{{ question.option }}
</label>
</div>
<button (click)="showResult()">Show Result</button>
<div *ngIf="result">
Correct Answers: {{correctAnswers}} | Incorrect Answers {{incorrectAnswers}}
</div>
<button (click) ="showAnswer()">show answer</button>
<div>{{correctOption}}
</div>
</div>`
這是我的組件 ts ：
import { Component, OnInit } from '@angular/core';
import { QuestionsService } from '../shared/questions.service';
import {Question} from '../shared/question';
@Component({
selector: 'app-question-learn',
templateUrl: './question-learn.component.html',
styleUrls: ['./question-learn.component.css']
})
export class QuestionLearnComponent implements OnInit {
questions: Question[] = [];
currentQuestion = 0;
answerSelected = false;
correctAnswers = 0;
incorrectAnswers = 0;
correctOption = '';
result = false;
constructor(private questionService: QuestionsService) { }
ngOnInit(): void {
this.questions = this.questionService.getQuestions();
}
onAnswer(option: boolean) {
this.answerSelected = true;
setTimeout(() => {
this.currentQuestion ;
this.answerSelected = false;
}, 2000);
if(option) {
this.correctAnswers ;
} else {
this.incorrectAnswers ;
}
}
showResult() {
this.result = true;
}
showAnswer() {
for (let question of this.questions) {
for (let answer of question.answers) {
if (answer.correct === true ) {
this.correctOption = answer.option;
console.log(this.correctOption);
}
}
}
}
}
這是一張圖片：
在此處輸入圖片說明
uj5u.com熱心網友回復：
嘗試這個。
showAnswer = () => {
const question = this.questions[this.currentQuestion];
for (let answer of question.answers) {
if (answer.correct === true ) {
this.correctOption = answer.option;
console.log(this.correctOption);
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/367288.html
上一篇：表單陣列只顯示一項