Looking for insights on the following situation:
I'm working with a survey structure that consists of questions and answers:
questions: Question[];
answer: Answer[];
Where Question is defined as:
export class Question {
idQuestion: string;
question: string;
}
export class Answer {
idAnswer: string;
answer: string;
idQuestion: string;
type: string; // inputbox - select - etc
}
Currently, I am able to display questions and answers separately like this:
<ul *ngFor="let question of questions;">
<li>
<a id="{{question.idQuestion}}">{{question.question}}</a>
</li>
</ul>
<ul *ngFor="let answer of answers;">
<li>
<a id="{{answer.idAnswer}}">{{answer.answer}}</a>
</li>
</ul>
However, I would like to render them in the format of:
question1: answer;
question2: answer;
question3: select;
How can I address this issue? Is there a specific pattern in Angular2 that can help with this? I want to avoid hardcoding the html by looping through the questions in the ts file to find the appropriate answers.