如何在 angular 11 中将上一个点击的答案设置为下一个问题

Question

你好.. 我正在 angular 11 构建一个测验应用程序，我的问题是当我点击一个问题的答案并转到下一个问题时，之前点击的答案会自动删除如何修复点击时的答案它不应该当我去下一个时删除 question.answer 非常感谢

    **HTML**
            <div>
                <div>
                    <h3> {{questionList[currentQuestion]?.questionText}}</h3>
                </div
            </div>
            <div >
              <ol *ngFor="let option of questionList[currentQuestion]?.options; let i=index">
                    <li  (click)=disble(questionList[currentQuestion].options,option,i)>
                       <label><input type="radio" name="options" value={{option}}> {{option}}</label><hr>

                </li>
            </ol>
        </div>
        <div>
            <button [disabled]="currentQuestion===0"(click)="previousQuestion()">/i>Previous</button>
            <button [disabled]="currentQuestion===(questionList.length-1)><(click)="nextQuestion()">Next</button>
          </div>

TS

import { Component, OnInit} from '@angular/core';


 @Component({
  selector: 'app-questions',
  templateUrl: './questions.component.html',
  styleUrls: ['./questions.component.css']
})



   constructor(private router:Router) { }
    public questionList:any=[];
    public currentQuestion:number=0;

   ngOnInit(): void {}

//suffle function for suffle the index of an array
   shuffle(array:any){
    var currentIndex = array.length, temporaryValue, randomIndex;
    while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
    }
     return array;
  }

 getAllQuestions(){
   this.qzservice.getQuestion().subscribe(res=>{
     console.log('get all questions',res.questions)
     this.questionList=res.questions;
    var suffleArray= this.shuffle(this.questionList);
      console.log('shuffled array',suffleArray);
   })
 }
 nextQuestion(){
  this.currentQuestion++;
   }

 previousQuestion(){
  this.currentQuestion--;
 }

disble(data:any,opton:any,ind:any){
 var gvnAnswer =opton;
    var corrAnswer=this.questionList[this.currentQuestion].answer
if(gvnAnswer==corrAnswer){
     console.log('right answer')
   else{
     console.log('Incorrect answer')
}

}

测验-service.service.ts

 questionUrl= '/assets/questions'
getQuestion(){
    return this.http.get<any>("assets/questions.json")
  }

questions.json

{
    "questions":[
            {
                "questionText":"The Kanjli Wetland in India is located in the state of -",
                "options":[
                    " Punjab",
                    "Rajasthan",
                    "Tamil Nadu",
                    "Gujarat"
                    ],
                "answer":" Punjab"
            },
        {
            "questionText":"Llanos grasslands are found in -",
            "options":[
                " Argentina",
                "Venezuela",
                "Paraguay",
                "Brazil"
                ],
             "answer":"Venezuela"
        },
        {
            "questionText":"Who was the last ruler of Shunga dynasty?",
            "options":[
                " Pulinda",
                "Andhrak",
                "Devbhuti",
                "Vasumitra"
                 ],
             "answer":"Devbhuti"
        },
        {

            "questionText":"In which session did the Indian National Congress adopt the resolution for Puma Swaraj?",
            "options":[
                " Calcutta",
                "Lahore",
                "Madras",
                "Lucknow"
             ],
             "answer":"Lahore"
          },
        {
            "questionText":"Sputnik vaccine of Corona is developed by which of the following countries?",
            "options":[
                " India",
                "China",
                "Canada",
                "Russia"
                ],
            "answer":"Russia"    
        }        
    ]       
}

Answer 1

您需要将给定的答案存储在一些 array 或 object 中。这样当您重新审视您的问题时，您将能够提取问题的给定答案。

     const answers = new Map<any, any>();

   disble(data:any,opton:any,ind:any){
     var gvnAnswer =opton;
     var corrAnswer=this.questionList[this.currentQuestion].answer
     this.answers.set(this.currentQuestion, gvnAnswer);
     if(gvnAnswer==corrAnswer){
       console.log('right answer')
     else{
       console.log('Incorrect answer')
     }
  }
 
  isChecked(option) {
    return this.answers.get(this.currentQuestion) === option;
  }
   <label>
     <input
                type="radio"
                name="fav_language"
                value="{{ option }}"
                [checked]="isChecked(option, i)"
              />{{ option }}</label

如何在 angular 11 中将上一个点击的答案设置为下一个问题

How to set the previous clicked answer on going next question in angular 11

arrays

ngfor

angular11