Dynamic String Interpolation for variable output in angular

Question

I need to mix the answers of Quiz-Questions in random order.

I have Question objects like: Question = { question: 'what is the capital of Germany?', answer1: 'Berlin', answer2: 'London', answer3: 'Paris', answer4: 'Rome' }

Every time I display the Question in the template I generate a random array eg randomOrder = [3,2,0,1]

I want to use string interpolation in the template to show the question with random Order of the answers:

Question: {{Question.question}}
Answer1: {{Question.answer'answerOrder[0]'}}
Answer2: {{Question.answer'answerOrder[1]'}}
Answer3: {{Question.answer'answerOrder[2]'}}
Answer4: {{Question.answer'answerOrder[3]'}}

Can someone help me with the correct syntax for angular? Thanks

Answer 1

just refer to object by a dynamic key

Question: {{Question.question}}
Answer1: {{Question['answer'+answerOrder[0]]}}
Answer2: {{Question['answer'+answerOrder[1]]}}

or you could store answers as array like this: {question: '...', answers: [a,b,c,d]}

Answer 2

A better aproach is to get a method to return the composed string, using string interpolation, like for example:

questionString(n: number): string {
   return `Answer${n+1}: ${questions['answer'+n]}`;
}

And use, for example:

{{question(1)}}
{{question(2)}}
...

Or better than, inside a for loop.