Angular: Dynami c привязка с помощью ngModel к массиву индекса - PullRequest
0 голосов
/ 06 мая 2020

Разработка angular приложения для подготовки к экзамену Застрял в технической составляющей. Я хочу записать ответ пользователя на вопрос и сохранить его в массиве checkedOptions: string [] = []; Для этого нужна помощь, привязать ответ пользователя к индексу массива

Я не использую ngFor в этом коде. Каждый новый вопрос загружается по щелчку.

технический компонент. html


<h3><span class="label label-warning" id="qid">{{no+1}}</span>{{ question }}</h3>
    <div class="quiz" id="quiz" data-toggle="buttons">
               <label class="element-animation1 btn btn-lg btn-secondary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" id="q_answer" name="q_answer" [value]="1" [(ngModel)]="checkedOptions[no]">{{optionA}}</label>
               <label class="element-animation2 btn btn-lg btn-secondary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" id="q_answer" name="q_answer" [value]="2" [(ngModel)]="checkedOptions[no]">{{optionB}}</label>
               <label class="element-animation3 btn btn-lg btn-secondary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" id="q_answer" name="q_answer" [value]="3" [(ngModel)]="checkedOptions[no]">{{optionC}}</label>
               <label class="element-animation4 btn btn-lg btn-secondary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" id="q_answer" name="q_answer" [value]="4" [(ngModel)]="checkedOptions[no]">{{optionD}}</label>
    </div>

технический компонент.ts

public checkedOptions: string[] = [];
public no: number;

//some code

setTimeout(() => {
      for (let index = 0; index < this.technicalService.questions.length; index++) {
        this.technicalService.technicalResponse.push(new Response(this.technicalService.questions[index].correctOption,this.checkedOptions[index]));
      }

      //send data to the server for marks calcualtion of module
      this.technicalService.calculateTechnicalMarks();

      console.log(this.technicalService.technicalResponse);

      console.log("Time over");



      //Tried to print this array out in the console
      for(let i=0; i<this.technicalService.questions.length; i++){
        console.log(this.checkedOptions[i]); //use i instead of 0
    }

      this.router.navigate(['/home']); 
      }, (this.commonUrl.communicationTime * 1000 * 60 + this.commonUrl.questionLoadinTime));
  }

//some code

фрагмент вывода консоли

Вывод консоли

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...