Angular三元表达式内Font Awesome图标无法正常渲染

Angular的{{}}插值表达式仅会将括号内的返回值作为纯文本渲染，所有HTML标签都会被自动转义，不会生成真实DOM节点。你直接把<i>标签写在插值的三元表达式里，自然会被当成普通字符串输出，无法渲染成Font Awesome图标。
另外代码里手动写的_ngcontent-c25是Angular编译阶段自动生成的视图封装属性，不需要手动硬编码在模板里，这类自动生成属性在构建配置调整、框架版本升级后可能发生变化，硬写反而会引发样式异常。

不要在插值表达式里拼接HTML标签，使用Angular原生的条件渲染结构指令实现切换即可，两种常用写法如下：

• 轻量简化版：给两个待切换的元素分别绑定*ngIf判断，代码量最少，逻辑一目了然

<span>
  <span *ngIf="isEditablePropertyworkLogSumTimes">edit</span>
  <i *ngIf="!isEditablePropertyworkLogSumTimes" class="fa fa-plus fa-fw"></i>
</span>

• 无冗余节点版：借助ng-container和ng-template实现分支渲染，不会额外生成多余的DOM层级

<span>
  <ng-container *ngIf="isEditablePropertyworkLogSumTimes; else addIconTpl">edit</ng-container>
  <ng-template #addIconTpl>
    <i class="fa fa-plus fa-fw"></i>
  </ng-template>
</span>

注意：不要为了图方便用[innerHTML]绑定渲染这段标签，这种方式会绕过Angular默认的安全检查，存在XSS注入风险，同时绑定的内容不会参与框架的变更检测流程，后续迭代很容易出隐性bug。

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