Блог

В моем приложении Angular quiz я добавляю функцию «предыдущие ответы», и у меня возникают некоторые трудности с отображением предыдущих ответов на вопросы с одним ответом.

Здесь ниже приведены 1) Функция TypeScript в моем QuizService, 2) фрагмент для вопросов с несколькими ответами, который отображает предыдущие ответы, и 3) моя попытка создать шаблон вопросов с одним ответом, с которым мне нужна помощь.

Вопросы с одним ответом должны показывать один соответствующий предыдущий ответ на вопрос.

Пожалуйста, не могли бы вы помочь решить эту проблему. Спасибо!

Код QuizService:

 setPreviousUserAnswersText(questions: QuizQuestion[], previousAnswers): void {
  for (let i = 0; i < previousAnswers.length; i  ) {
    if (previousAnswers[i].length === 1) {
      const previousAnswersSingleText = questions[i].options[previousAnswers[i] - 1].text;
      this.previousAnswers.push(previousAnswersSingleText);
    }
    if (previousAnswers[i].length > 1) {
      const previousAnswerMultiple = previousAnswers[i].slice();
      for (let j = 0; j < previousAnswerMultiple.length; j  ) {
        const previousAnswersMultipleText = questions[i].options[previousAnswerMultiple[j] - 1].text;          
        this.previousAnswersMultipleTextArray.push(previousAnswersMultipleText);
      }
      this.previousAnswers.push(this.previousAnswersMultipleTextArray);
    }
  }
}
  

HTML-шаблон с несколькими ответами:

 <ng-container *ngIf="option.selected">
  ...
  <div *ngFor="let previousAnswer of previousAnswers; index as j" class="previous-answer-text">
    <span *ngIf="previousAnswers[j].length > 1">
        {{ previousAnswer | join }} were selected in your previous quiz.
    </span>
  </div>
</ng-container>
  

Шаблон HTML с одним ответом (нужна помощь с этим):

 <ng-container *ngIf="option.selected">
  ...  
  <!-- TODO: get this working -->
  <div *ngFor="let previousAnswer of previousAnswers; index as j" class="previous-answer-text">
    <span *ngIf="previousAnswers[j].length === 1">
      amp;ldquo;{{ previousAnswer }}amp;rdquo; was selected in your previous quiz.
    </span>
  </div>
</ng-container>