Angular中*ngIf声明变量报错‘*ngIf不是div的已知属性’及修复后alt为空问题

初始报错修复说明 #

• 错误根因：Angular 结构型指令（如*ngIf）的绑定表达式中不需要使用{{ }}插值语法，你在*ngIf值里混用了插值和表达式，导致模板解析失败，才抛出Can't bind to '*ngIf' since it isn't a known property of 'div'错误。
• 你后续去掉{{ }}改为('article image' | translate) + ' 1'的写法，已经解决了模板解析的语法错误，因此不再报错。

修改后alt属性为空的解决方案 #

原因分析 #

*ngIf="表达式; let articleImage1Alt"的变量赋值逻辑是：只有当表达式结果为真值时，才会将表达式的返回值赋值给articleImage1Alt，同时渲染div内部的内容。你现在拿到空值，常见原因有两个：

1. 翻译key 'article image'不存在/翻译文件未加载完成，translate管道返回空值
2. 用let声明*ngIf变量的写法稳定性较差，容易出现赋值时序问题

最优方案（无需额外套div） #

你完全没必要为了声明默认alt变量多套一层冗余div，直接在img的alt属性中写绑定表达式即可实现需求：

<img 
  *ngIf="document.image_1" 
  class="image-1" 
  [src]="document.image_1" 
  [alt]="document.image_1_alttxt || (('article image' | translate) || 'article image') + ' 1'"
/>

这里改用[alt]属性绑定直接接收表达式，不需要插值，语法更规范，也减少了不必要的DOM节点。同时给翻译管道加了兜底值，避免翻译加载失败/key不存在导致的空值。

保留外层div写法的修复方案 #

如果确实需要保留外层div声明变量的逻辑，改用更稳定的as语法赋值即可：

<div *ngIf="(('article image' | translate) || 'article image') + ' 1' as articleImage1Alt">
  <img 
    *ngIf="document.image_1" 
    class="image-1" 
    [src]="document.image_1" 
    [alt]="document.image_1_alttxt || articleImage1Alt"
  />
</div>

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