在 Angular 的 innerHTML 中使用字符串插值

我正在设计一个游戏，我正在动态地创建内部有空白的语句，并要求玩家填写空白。我需要字符串插值来记录用户的输入，但我还需要设置动态innerHTML，因为空格可以位于语句中的任何位置。

我知道这听起来很模糊，这里是相关的代码示例：

应用程序组件.html

<input type="range" step="1" min="0" max="100" class="slider 
       (input)="sliderMoved($event)">

<div class="question" [innerHTML]="questionStatement"></div>

应用程序组件.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;}  

The questionStatement可以有<div class="percent">{{display}}%</div>在句子的任何地方，因此需要动态入口点。

这里，字符串插值（{{display}}）不适用于innerHTML。它将在屏幕上显示为{{display}}。这种情况我能做什么？

模板文字应该可以帮助你。如果您像下面这样修改您的组件，您的问题应该得到解决。

应用程序组件.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.`
}