AsyncPipe

透過AsyncPipe訂閱task$屬性

src/app/app.component.css

@@ -2,9 +2,10 @@ p {
   font-family: Lato;
 }
 
-.item {
-  margin: 20px;
-  padding: 10px;
-  text-align: text;
+.data-empty {
+  margin: 10px 20px;
+  padding-left: 5px;
   border: solid 1px #aaa;
+  text-align: center;
+  line-height: 32pt;
 }

src/app/app.component.html

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

src/app/app.component.ts

@@ -1,22 +1,20 @@
-import { HttpResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { TaskService } from './task.service';
 
 import { Task } from './task';
-import { TaskService } from './task.service';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: [ './app.component.css' ]
 })
 export class AppComponent implements OnInit {
-  tasks: Task[] = [];
+  tasks$!: Observable<Task[]>;
 
   constructor(private taskService: TaskService) {}
 
   ngOnInit(): void {
-
-    this.taskService.getList().subscribe()
-    };
+    this.tasks$ = this.taskService.getList();
   }
-
+}

src/app/app.module.ts

@@ -1,12 +1,13 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
-import { HttpClientModule } from '@angular/common/http';
+import { TaskComponent } from './task/task.component';
 
 @NgModule({
   imports:      [ BrowserModule, HttpClientModule ],
-  declarations: [ AppComponent ],
+  declarations: [ AppComponent, TaskComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

src/app/task.service.ts

@@ -1,8 +1,5 @@
-import { HttpResponse } from '@angular/common/http';
-import { HttpEvent } from '@angular/common/http';
-import { HttpEventType } from '@angular/common/http';
-import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 import { Observable, tap } from 'rxjs';
 
 import { Task } from './task';
@@ -13,16 +10,7 @@ import { Task } from './task';
 export class TaskService {
   constructor(private httpClient: HttpClient) {}
 
-  getList(): Observable<HttpEvent<Task[]>> {
-    return this.httpClient
-      .get<Task[]>('assets/tasks.json', {
-        observe: 'events',
-        reportProgress: true,
-      })
-      .pipe(
-        tap((event) =>
-          console.log(`Http Event Type = ${HttpEventType[event.type]}`)
-        )
-      );
+  getList(): Observable<Task[]> {
+    return this.httpClient.get<Task[]>('assets/tasks.json');
   }
 }

src/app/task.ts

@@ -1,4 +1,8 @@
 export class Task {
-  subject!: string;
-  content!: string;
+  constructor(initData?: Partial<Task>){
+    Object.assign(this,initData);
+  }
+
+  TaskSn!: string;
+  TaskName!: string;
 }

src/app/task/task.component.css

@@ -0,0 +1,14 @@
+:host {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 20px;
+  padding-left: 5px;
+  padding-right: 10px;
+  border: solid 1px #aaa;
+  line-height: 32pt;
+}
+
+:host(.odd) {
+  background-color: #777;
+  color: white;
+}

src/app/task/task.component.html

@@ -0,0 +1 @@
+<span>{{ task.TaskName }}</span>

src/app/task/task.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from '@angular/core';
+import{ Task} from '../task';
+
+@Component({
+  selector: 'app-task',
+  templateUrl: './task.component.html',
+  styleUrls: ['./task.component.css']
+})
+export class TaskComponent  {
+
+@Input() task!: Task;
+
+
+}

src/assets/tasks.json

@@ -1,6 +1,6 @@
 [
-  {
-    "subject": "Task A",
-    "content": "Do something..."
-  }
+  { "TaskSn": "001", "TaskName": "待辦事項 A" },
+  { "TaskSn": "002", "TaskName": "待辦事項 B" },
+  { "TaskSn": "003", "TaskName": "待辦事項 C" },
+  { "TaskSn": "004", "TaskName": "待辦事項 D" }
 ]