Angular 如何从html模板中的角度函数返回带有CSS类的html？

我有一个列表元素，在这里我用

[innerHTML]

调用函数，它返回html元素，如果我希望html的某些部分用粗体显示，它正在工作。在这种情况下，-

difference.hours

中的文本将以粗体显示

HTML

 <li class="list-group-item" [innerHTML]="getRemainingAppointmentDate(appointment.time_remaining)"></li>

TYPESCRIPT

return `Hours: <strong>${difference.hours}</strong>`;

返回'Hours:${difference.Hours}`；

但我不知道如何才能赋予元素风格。 例如，如果我尝试

return `Hours: <span class='red'>${difference.hours}</span>`;

return`Hours:${difference.Hours}`；

---

然后给定的类不会应用于返回的文本。

我在这里看到多个问题

如果使用默认更改检测策略，则将函数绑定到属性，如

[innerHTML]=…

，将触发每个CD周期的函数。这可能是太多次，可能会影响应用程序的性能

有更好的方法动态设置CSS，而不是依赖

[innerHTML]

。最好不要过于依赖

[innerHTML]

，因为它相对受限。例如，您需要使用

DomSanitizer

的

bypassSecurityTrustHtml

函数明确告诉Angular信任HTML

相反，您可以使用

[ngClass]

。既然你没有提供太多的信息，我将做以下的澳大利亚调查：

• 这是一个使用

  *ngFor

  指令的循环
• 与其让函数

  remainingappointdate（）

  返回HTML字符串，不如让它基于相同的条件返回布尔值

控制器

约会。forEach（约会=>{
if（剩余预约日期（剩余预约时间））{
appointment.ending=true；
}否则{
appointment.ending=false；
}
});

模板

CSS选择器

.red{
字体大小：正常；
颜色：红色；
}
.正常{
字体大小：粗体；
}

如果需要为每一秒确定一个类，那么最好使条件布尔RxJS可见，并在模板中使用

async

管道来更新它

更新：工作示例 以下是评论中包含的工作示例：

下面是执行时输出的屏幕截图：

---

你好，迈克尔，谢谢你的回复。除了第一部分，你什么都懂了，你是怎么说innerHTML会触发函数o nevery CD cycle的？你所说的CD周期是什么意思？@andrej.boshkoski1:CD周期就是变化检测周期。Angular通过监视控制器的状态来保持DOM的更新。这是一个广泛的话题在这里讨论。你可以开始。简而言之，每次状态更改都会刷新DOM。在DOM中，将针对控制器中的每个状态更改进行刷新。因此，控制器状态的每次更改都会触发函数

remainingappointdate（）

。谢谢Michael。我在ngOnit上有一个setInterval，我在那里重新加载页面，但现在我得到了-表达式在检查后发生了变化-我如何在Separet setInterval中运行每个appointmant_日期？正如我在回答中提到的，更好的方法是依靠RxJS observables根据间隔更新值（例如使用）并使用管道在模板中进行更新。我对rxjs不太在行。你能提供示例代码吗？