From ddc8e2af5ad26f2998649d7cabfa29188abde46a Mon Sep 17 00:00:00 2001
From: HarveyChou <harveychou@origtek-com.tw>
Date: Mon, 7 Nov 2022 11:17:17 +0800
Subject: [PATCH] =?UTF-8?q?AsyncPipe=20=E9=80=8F=E9=81=8EAsyncPipe?=
 =?UTF-8?q?=E8=A8=82=E9=96=B1task$=E5=B1=AC=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.css        |  9 +++++----
 src/app/app.component.html       | 14 +++++++++++++-
 src/app/app.component.ts         | 14 ++++++--------
 src/app/app.module.ts            |  5 +++--
 src/app/task.service.ts          | 18 +++---------------
 src/app/task.ts                  |  8 ++++++--
 src/app/task/task.component.css  | 14 ++++++++++++++
 src/app/task/task.component.html |  1 +
 src/app/task/task.component.ts   | 14 ++++++++++++++
 src/assets/tasks.json            |  8 ++++----
 10 files changed, 69 insertions(+), 36 deletions(-)
 create mode 100644 src/app/task/task.component.css
 create mode 100644 src/app/task/task.component.html
 create mode 100644 src/app/task/task.component.ts

diff --git a/src/app/app.component.css b/src/app/app.component.css
index a592f3a..34633e7 100644
--- a/src/app/app.component.css
+++ b/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;
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ec4a8ff..35ff71f 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ce7b5fa..8709ee4 100644
--- a/src/app/app.component.ts
+++ b/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();
   }
-
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e60d356..df2f671 100644
--- a/src/app/app.module.ts
+++ b/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 { }
diff --git a/src/app/task.service.ts b/src/app/task.service.ts
index fcb711c..1ae3603 100644
--- a/src/app/task.service.ts
+++ b/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');
   }
 }
diff --git a/src/app/task.ts b/src/app/task.ts
index b407bb4..a38c3b5 100644
--- a/src/app/task.ts
+++ b/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;
 }
diff --git a/src/app/task/task.component.css b/src/app/task/task.component.css
new file mode 100644
index 0000000..0d51aa7
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/task/task.component.html b/src/app/task/task.component.html
new file mode 100644
index 0000000..c07056b
--- /dev/null
+++ b/src/app/task/task.component.html
@@ -0,0 +1 @@
+<span>{{ task.TaskName }}</span>
diff --git a/src/app/task/task.component.ts b/src/app/task/task.component.ts
new file mode 100644
index 0000000..1417238
--- /dev/null
+++ b/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;
+
+
+}
diff --git a/src/assets/tasks.json b/src/assets/tasks.json
index e64c5be..8cee24f 100644
--- a/src/assets/tasks.json
+++ b/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" }
 ]