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

您使用的是ngIf，表示您正在有条件地显示您的值。值为0时，您的条件计算为false，因此不会显示。

Answer 2

如this issue中所述，这是预期的行为。 NgIf将给定表达式强制为boolean值。如果表达式的计算结果为falsy值（将这些值转换为 false ），则不会呈现内容。

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

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