Angular项目中HTML代码如何将0设为有效值并显示，以及优化ngIf判断null/undefined的方法

我完全懂你的困扰——在处理数字值时，0经常被*ngIf="value"当成假值过滤掉，但我们又需要它正常显示，同时还要排除null和undefined。这里有几个简洁的方案帮你解决：

最推荐的简洁写法：*ngIf="value != null" #

这个写法是value !== null && value !== undefined的等价简化版，它会自动排除null和undefined，但保留0、空字符串、false这些其他值（如果你的场景里这些也需要显示的话，刚好合适）。

替换后的代码：

<div *ngIf="value != null"> {{value}} </div>

这样当value是0时，*ngIf会返回true，正常显示0；如果是null或undefined，则不渲染这个div，完全符合你的需求。

针对仅保留0的场景（可选） #

如果你的需求更严格，比如只想显示0和非空的真值（排除空字符串、false等），可以用这个写法：

<div *ngIf="value === 0 || !!value"> {{value}} </div>

不过这个写法不如第一个简洁，只有在你需要额外过滤其他假值时才推荐使用。

小提示 #

Angular的模板表达式里逻辑与是&&而不是and，你原来的代码里的and其实是语法错误，改成&&才能正常运行哦～

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