angular - ค่าของ Observable ไม่แสดงเมื่อเป็น 0 (ศูนย์)

ใช้ 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 เป็นต้น ค่าจะถูกแสดงอย่างถูกต้อง

แต่เมื่อค่าของ count$ เป็น 0 มันจะแสดงเพียง loading เท่านั้น

มีไอเดียไหมว่าทำไม?

คำตอบ #1

เนื่องจากคุณต้องการทดสอบค่าของ observable ในเงื่อนไขและยังแสดงค่านั้นในมุมมอง คุณสามารถใช้แท็ก ng-container ซ้อนกันสองชั้น ชั้นแรกจะรับค่าของ count (โดยใช้เทคนิคที่อธิบายในบทความนี้) และชั้นที่สองจะใช้ค่านั้นทั้งในเงื่อนไขและในมุมมอง โครงสร้างนี้ช่วยให้สามารถนำค่ากลับมาใช้ซ้ำได้โดยไม่ต้องสร้าง subscription หลายครั้งกับ observable ตัวเดียวกัน

<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>

ดู stackblitz นี้เพื่อสาธิต

คำตอบ #2

เพราะมันเป็นค่าที่เท็จ: Boolean(0) === false ไม่มีอะไรพิเศษ ;)

อัปเดต :

.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>