Angular 12中*ngIf搭配else使用时报类型错误的原因及解决

重温Angular的*ngIf else分支语法时，编写测试代码运行后抛出类型错误，目标是掌握该语法的正确用法，满足后续代码维护需求。

测试代码如下：

<div *ngIf="valor === 'teste'; else showOther">tttt</div>

<ng-temlate #showOther>
  <ng-content> outro </ng-content>
</ng-temlate>

运行时抛出的报错信息：

Type 'HTMLElement' is not assignable to type 'TemplateRef<NgIfContext<boolean>>'.

报错由两处写法错误直接导致：

• 标签拼写错误：Angular的模板占位节点正确标签名是<ng-template>，代码中错写为ng-temlate（字母l和a顺序颠倒）。Angular无法识别拼写错误的标签，会将其判定为普通自定义HTML元素，因此模板引用变量#showOther获取到的是普通HTMLElement类型实例。
• 类型不匹配：*ngIf的else分支要求接收的参数必须是TemplateRef类型的模板引用，传入普通DOM元素引用时，就会触发上述类型校验错误。

额外说明：代码中<ng-content>的用法也不符合规范，该标签用于实现组件内容投射，本身不支持包裹自定义渲染内容，直接在标签内写文本不会按预期生效。

修正拼写错误、调整错误的内容写法即可，修复后的可运行代码如下：

<div *ngIf="valor === 'teste'; else showOther">tttt</div>

<ng-template #showOther>
  outro
</ng-template>

修复后逻辑符合预期：当valor === 'teste'判断为真时，渲染div内的tttt文本；判断为假时，自动渲染#showOther模板内的outro文本，无类型报错。

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