在Angular中使用innerHTML中的字符串插值
在Angular中使用innerHTML中的字符串插值
提问于 2018-07-11 08:46:33
我正在设计一个游戏，我在动态地创建语句，里面有空格，并要求玩家填写空格。我需要字符串插值来记录用户的输入，但我还需要设置动态innerHTML，因为空格可以在语句中的任何位置。
我知道这听起来很模糊，下面是相关的代码示例：
app.component.html
<input type="range" step="1" min="0" max="100" class="slider
(input)="sliderMoved($event)">
<div class="question" [innerHTML]="questionStatement"></div>app.component.ts
display=50;
questionStatement='<div class="percent">{{display}}%</div>
of Americans have a university degree.'
questionStatementExample2='Canada is <div class="percent">{{display}}%</div>
the size of America.'
sliderMoved(event: any) {this.display=event.target.value;} questionStatement可以将<div class="percent">{{display}}%</div>放在句子的任何位置，因此需要动态入口点。
在这里，字符串插值({{display}})在innerHTML中不起作用。它将以{{display}}的形式显示在屏幕上。在这种情况下我能做什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-11 09:13:49
Template literals应该能帮你解决这个问题。如果你像下面这样修改你的组件，你的问题应该会得到解决。
app.component.ts
display = 50;
questionStatement = `<div class="percent">${this.display}%</div> of Americans have a university degree.`
sliderMoved(event: any) {
this.display=event.target.value;
this.questionStatement = `<div class="percent">${this.display}%</div> of Americans have a university degree.`
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51275726
复制相关文章
相似问题