[英]Using string interpolation in innerHTML in Angular
我正在设计一个游戏,并且正在动态创建内部带有空格的语句,并要求玩家填写空格。 我需要字符串插值来记录用户的输入,但是我还需要设置动态的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}}
在屏幕上。 在这种情况下我该怎么办?
模板文字应该可以帮助您。 如果您像下面那样修改组件,则应解决您的问题。
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.`
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.