angular 中变量 output 的动态字符串插值

Question

我需要以随机顺序混合测验问题的答案。

我有像这样的问题对象：问题= {问题：'德国的首都是什么？'，答案1：'柏林'，答案2：'伦敦'，答案3：'巴黎'，答案4：'罗马'}

每次我在模板中显示问题时，我都会生成一个随机数组，例如 randomOrder = [3,2,0,1]

我想在模板中使用字符串插值来显示具有随机答案顺序的问题：

问题：{{Question.question}}
答案 1：{{Question.answer'answerOrder[0]'}}
答案 2：{{Question.answer'answerOrder[1]'}}
答案 3：{{Question.answer'answerOrder[2]'}}
答案 4：{{Question.answer'answerOrder[3]'}}

有人可以帮助我了解 angular 的正确语法吗？ 谢谢

Answer 1

只需通过动态键引用 object

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

或者您可以将答案存储为这样的数组： {question: '...', answers: [a,b,c,d]}

Answer 2

更好的方法是使用字符串插值获取返回组合字符串的方法，例如：

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

并使用，例如：

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

或者比在 for 循环中更好。