AsyncPipe 加入as關鍵字，建立範本區域變數，紀錄遠端傳回的清單資料

src/app/app.component.html

@@ -1,13 +1,11 @@
-<ng-container *ngIf="tasks$ | async; then list; else empty"></ng-container>
-
-<ng-template #empty>
-  <div class="data-empty">無待辦事項</div>
-</ng-template>
-
-<ng-template #list>
+<ng-container *ngIf="tasks$ | async as tasks; else empty">
   <app-task
-    *ngFor="let task of tasks$ | async; let odd = odd"
+    *ngFor="let task of tasks; let odd = odd"
     [class.odd]="odd"
     [task]="task"
   ></app-task>
+</ng-container>
+
+<ng-template #empty>
+  <div class="data-empty">無待辦事項</div>
 </ng-template>