作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在设计一个游戏,我正在动态创建内部有空白的语句并要求玩家填写空白。我需要字符串插值来记录用户的输入,但我还需要设置动态 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}}
。 .在这种情况下我能做什么?
最佳答案
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.`
}
关于javascript - 在 Angular 的 innerHTML 中使用字符串插值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51275726/
我是一名优秀的程序员,十分优秀!