Angular中如何根据条件动态添加<a>标签

最初的写法不符合Angular语法规范，核心问题是：
双花括号{{ }}是Angular的文本插值语法，仅会将内部表达式的计算结果作为纯文本渲染，即使表达式返回HTML标签字符串，也会被Angular自动转义为普通字符，不会解析为真实的DOM节点；同时插值语法本身也不支持直接嵌入未转义的原生HTML标签结构。

方案1：使用*ngIf结构指令（官方推荐，生产环境首选） #

这是Angular标准的条件渲染写法，逻辑清晰无安全隐患，支持给元素加事件、指令等扩展逻辑：

<!-- mockupSheet为0时显示纯文本 -->
<ng-container *ngIf="mockupSheet === 0; else showLink">No</ng-container>

<!-- mockupSheet不为0时渲染链接 -->
<ng-template #showLink>
  <a [href]="targetLink">{{ mockupSheetActualValue }}</a>
</ng-template>

其中<ng-container>是Angular提供的逻辑容器，渲染后不会产生额外的DOM标签，不会破坏原有页面布局结构。如果是固定链接，直接把[href]="targetLink"换成href="你的固定链接地址"即可；如果是动态链接，把targetLink替换成组件中存储链接地址的变量名。
如果不想用ng-template，也可以直接写两个条件分支的元素：

<span *ngIf="mockupSheet === 0">No</span>
<a *ngIf="mockupSheet !== 0" [href]="targetLink">{{ mockupSheetActualValue }}</a>

方案2：使用innerHTML属性绑定（仅适合简单静态内容场景） #

如果希望用单标签+三元表达式的写法实现，可以通过Angular的HTML属性绑定来渲染动态HTML内容，注意这种方式渲染的内容不会识别Angular指令、绑定，动态链接场景存在XSS风险，非必要不推荐：

<span [innerHTML]="mockupSheet === 0 ? 'No' : '<a href=\'你的固定链接地址\'>' + mockupSheetActualValue + '</a>'"></span>

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