NgIf 和零：为什么模板没有被渲染？

Question

我在 Angular 组件上有以下可观察的内容：

count$: Observable<number>;

this.count$ = this.getCount();

通过使用以下内容，我得到值 0（零）；

this.count$.subscribe(x => console.log(x));

在模板上我有：

<a routerLink="/dash" *ngIf="(count$ | async)">
  <ng-container *ngIf="count$ | async as count">
    Count: {{count}}
  </ng-container>
</a> 

如果count$是 1，我得到Count: 1，但如果count$是 0，内容Count: 0甚至不会呈现。

知道为什么吗？

Answer 1

如果有人正在寻找解决方法，这很愚蠢，但它有效：

   <ng-container *ngIf="{ len: count$ | async } as ctx">
      <ng-container *ngIf="ctx.len !== null"        
          {{ ctx.len }} 
       </ng-container>
   </ng-container>

解释：

1. 捕获count为len名为的对象内部ctx
2. 因为*ngIf现在正在查看一个对象，而不是值，它将评估为 true 并呈现ng-container
3. 现在我们检查是否获得了实际值ctx.len !== null
4. 我们可以使用以下方式访问该值ctx.len

Answer 2

正如本期所讨论的，这是预期的行为。NgIf将给定表达式强制转换为boolean值。如果表达式的计算结果为假值（被转换为false 的值），则不会呈现内容。

以下是 javascript 当前转换为false的所有值：

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (``)