Angular 17中*ngIf仅接受布尔值？非布尔值不自动转换

问题描述 #

原本正常运行的Angular应用出现异常，发现*ngIf似乎仅接受布尔值，不再将假值（falsy）/真值（truthy）自动转换为布尔值。但在官方文档及网络搜索中未找到相关破坏性变更说明，不清楚问题原因。

相关代码 #

<pre><code>{{ arr?.length }}</code></pre>

<pre *ngIf="arr?.length">has length (value)</pre>
<pre *ngIf="!!arr?.length">has length (bool)</pre>
<pre *ngIf="!arr?.length">has no length (bool)</pre>

渲染情况 #

界面显示{{ arr?.length }}的结果为0，仅<pre *ngIf="!arr?.length">has no length (bool)</pre>这一行被渲染，另外两个带*ngIf的<pre>均未显示。

问题分析与说明 #

Angular的*ngIf从未有过“仅接受布尔值”的破坏性变更，它始终会自动将表达式结果转换为布尔值判断。

从你的代码和结果来看：

• arr?.length的值是0，属于JavaScript假值范畴，*ngIf会将其转为false，所以第一个<pre>不显示，这是正常行为。
• !!arr?.length等价于!!0，结果为false，因此第二个<pre>也不会显示。
• !arr?.length等价于!0，结果为true，所以第三个<pre>正常渲染。

如果觉得和之前运行结果不符，大概率是以下原因：

• 之前arr?.length是大于0的数值（真值），所以第一个<pre>会显示。
• 代码中arr的赋值或初始化逻辑被修改，导致length变为0。
• 混淆了*ngIf和[hidden]的行为（后者是CSS隐藏DOM，不会移除元素）。

建议排查方向：

• 确认当前arr的实际值，检查length是否确实为0。
• 回溯代码变更记录，查看是否修改过arr的相关逻辑。

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