HttpClient 把資料傳到後端服務

this.heep.pose<Task[]>(url,tasks);
使用HTTP_INTERCEPTORS攔截http請求，依據需求作其他處理
ng generate interceptor [component]

src/app/app.component.html

@@ -1,3 +1,11 @@
-<button [disabled]="display" (click)="display = true">開啟計時</button>
-<button [disabled]="!display" (click)="display = false">關閉計時</button>
-<app-timer *ngIf="display"></app-timer>
+<ng-container *ngIf="tasks$ | async as tasks; else empty">
+  <app-task
+    *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>

src/app/app.component.ts

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

src/app/app.module.ts

@@ -1,13 +1,18 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
-import { TimerComponent } from './timer/timer.component';
+import { TaskComponent } from './task/task.component';
+import { TokenInterceptor } from './token.interceptor';
 
 @NgModule({
-  imports:      [ BrowserModule, HttpClientModule ],
-  declarations: [ AppComponent, TimerComponent ],
-  bootstrap:    [ AppComponent ]
+  imports: [BrowserModule, HttpClientModule],
+  declarations: [AppComponent, TaskComponent],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
+  ],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/task.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, tap } from 'rxjs';
+
+import { Task } from './task';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TaskService {
+  constructor(private httpClient: HttpClient) {}
+
+  getList(): Observable<Task[]> {
+    return this.httpClient.get<Task[]>('assets/tasks.json');
+  }
+}

src/app/task.ts

@@ -0,0 +1,8 @@
+export class Task {
+  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 @@
+{{ task.TaskName }}

src/app/task/task.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } 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/app/timer/timer.component.html

@@ -1 +0,0 @@
-Time:{{time}}

src/app/timer/timer.component.ts

@@ -1,25 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import {interval, Subscription} from 'rxjs';
-@Component({
-  selector: 'app-timer',
-  templateUrl: './timer.component.html',
-  styleUrls: ['./timer.component.css']
-})
-export class TimerComponent implements OnInit, OnDestroy {
-  time=0;
-  subscription!: Subscription;
-  constructor() { }
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
-
-  ngOnInit(): void {
-    this.subscription=interval(1000).subscribe({
-      next:(time)=>{
-        console.log(time);
-        this.time=time;
-      }
-    });
-  }
-
-}

src/app/token.interceptor.ts

@@ -0,0 +1,14 @@
+import { HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
+import { HttpInterceptor } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+
+@Injectable()
+export class TokenInterceptor implements HttpInterceptor {
+  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const newReq = req.clone({
+      setHeaders: { Authorization: 'token' }
+    });
+    return next.handle(newReq);
+  }
+}

src/assets/tasks.json

@@ -0,0 +1,6 @@
+[
+  { "TaskSn": "001", "TaskName": "待辦事項 A" },
+  { "TaskSn": "002", "TaskName": "待辦事項 B" },
+  { "TaskSn": "003", "TaskName": "待辦事項 C" },
+  { "TaskSn": "004", "TaskName": "待辦事項 D" }
+]