Angular中*ngIf绑定element.number元素不显示，已试可选链，原因何在？

出现这种情况的核心是Angular插值表达式和*ngIf的判断逻辑完全不同：

• 插值{{ element.number }}会把任何值转成字符串输出，哪怕是0、NaN这类在布尔判断里属于“假值”的内容；
• 但*ngIf是严格的布尔值判断，只有当表达式结果为true时才会渲染对应内容。

常见的具体场景：

• element.number的值是0：插值会正常显示0，但*ngIf="0"会被解析为布尔值false，所以不会渲染div里的内容。
• element.number是NaN：插值会显示"NaN"，但*ngIf判断NaN为false，同样不会显示内容。
• element.number是空字符串""：不过你提到能显示数值，这个情况可能性较低，但如果是空字符串，插值会显示空白，*ngIf也会判断为false。

如果是0这类合法数值导致的问题，你可以把判断逻辑改成排除undefined和null即可，比如：

<div *ngIf="element.number != null">
  123
</div>

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