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

值。如果表达式的计算结果为 falsy 值（转换为 false 的值），则不会呈现内容。

以下是 javascript 目前翻译为 false 的所有值：

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

Answer 3

您正在使用 ngIf，意味着您正在对您的值进行条件显示。当值为 0 时，您的条件评估为 false，因此不会显示。

Answer 4

在这些情况下：

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

上面说的这些都是假的，这是我的建议： 通过使用 pipe(map()) 将其转换为字符串，这样 '0' 就不是假的，它仍然可以与数字管道等一起使用。

希望这对其他人有帮助。

Answer 5

@Jota.toledo 答案是正确的，

*ngIf

将 0 视为虚假值并且不渲染它。
在这种情况下，我经常使用

LetDirective

作为解决方法。

    import { LetDirective } from '@ngrx/component';

    <a routerLink="/dash" *ngrxLet="count$ | async as count">
        Count: {{count}}
    </a> 

从 Angular 18.1 开始，你还可以使用 @let

    @let count = count$ | async;
    <a routerLink="/dash" *ngIf="count != null">
        Count: {{count}}
    </a>