Angular中如何在三元条件运算符中传递HTML标签？

问题根源 #

Angular的插值表达式({{ }})属于文本绑定，会自动转义所有HTML字符。你传入的<span>Inactive</span>会被转义成<span>Inactive</span>显示，甚至触发语法错误，这就是客户端报错的原因。

解决方案 #

根据你“仅显示Inactive/Active文字”的需求，分场景处理：

1. 仅需纯文本显示

直接去掉多余的<span>标签，回到最初的写法即可：

{{!status.available ? 'Inactive' : 'Active'}}

这是最简洁且符合需求的方式，完全不会有问题。

2. 需要给文字添加样式（比如高亮、变色）

如果想给Inactive加样式但仍只显示文字，不要在插值里写HTML标签，改用Angular的样式绑定：

• 用ngClass绑定CSS类：

  <span [ngClass]="{'inactive-class': !status.available}">
    {{!status.available ? 'Inactive' : 'Active'}}
  </span>
  

  然后在CSS中定义类样式：

  .inactive-class { color: red; font-weight: bold; }
  

• 或者直接用内联样式绑定：

  <span [style.color]="!status.available ? 'red' : 'green'">
    {{!status.available ? 'Inactive' : 'Active'}}
  </span>
  

3. （不推荐）确实需要动态插入HTML

如果你的场景必须插入HTML元素（但你需求是仅显示文字，这种情况大概率不需要），可以用[innerHTML]绑定替代插值：

<span [innerHTML]="!status.available ? '<span>Inactive</span>' : 'Active'"></span>

注意：这种方式会解析HTML，存在XSS风险，非必要不要使用。

内容的提问来源于stack exchange，提问作者Rahul Singh