Значение Observable не отображается, когда оно равно 0 (ноль)

Question

Используя Angular 8, у меня есть следующее:

<ng-container *ngIf="(count$ | async) as count; else loader">{{count}}</ng-container>
<ng-template #loader>
    loading
</ng-template>

Переменная count$ является Observable<number> ...

Когда значение count$ равно 1, 2, et c значение отображается правильно.

Но когда значение count$ равно 0, оно показывает только loading.

Есть идеи, почему?

Answer 1

Поскольку вы хотите проверить значение наблюдаемого в условии, а также отобразить это значение в представлении, вы можете использовать два вложенных тега ng-container. Первый получает значение count (используя технику, описанную в этой статье ), а второй использует значение в условии и в представлении. Эта структура позволяет повторно использовать значение без создания нескольких подписок на одну и ту же наблюдаемую область.

<ng-container *ngIf="{ count: count$ | async } as data">
  <ng-container *ngIf="data.count === 0 || data.count > 0; else loader">
    {{data.count}}
  </ng-container>
</ng-container>
<ng-template #loader>
  loading
</ng-template>

См. этот стек * блиц для демонстрации.

Answer 2

Потому что это ложное значение: Boolean(0) === false. Ничего особенного;)

UPD:

.ts

this.count$;

constructor() {
  this.count$ = interval(2000).pipe(map(i => `${i}`));
}

. html

<ng-container *ngIf="count$ | async as count; else loader">
  {{ count }}
</ng-container>
<ng-template #loader>
  loading
</ng-template>