前幾天在youtube看到 保哥的todomvc影片 ，想到上次寫angular是上上上份工作的事情，那時候是寫Angular8也因分工的關係，都是在寫跟畫面上的功能有關的工作而資料上傳下載相關的程式就沒有碰，因此想抓回一些基礎就邊看影片邊寫，因為現在的公司都在寫web form。
目前練習用的是Angular 12，然後在影片約15分鐘左右的地方有點卡關。
我將上傳下載TODOs的功能寫在service裡面

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map, catchError } from "rxjs/operators";
import { Todos } from './todos';
@Injectable({
  providedIn: 'root'
})
export class TodosService {
  private headers = new HttpHeaders({
    'authorization': 'token fe77d5f7-126a-4bdb-93c3-a5ada9f5df64'
  });
  requestOptions = {
    headers: this.headers
  }
  constructor(private http: HttpClient,) {
  }
  GetTodos() {
    return this.http.get('./me/todomvc', this.requestOptions)
      .pipe(
        map((res: any) => {
          return res
        }),
        catchError(error => {
          return error
        })
      );
  }
  SaveTodos(newTodos: Todos[]) {
    this.http.post('./me/todomvc', newTodos, this.requestOptions).subscribe(
      res => {
        console.log(res);
        return res;
      })
  }
}

而影片裡面的程式是寫在app.component.ts裡，我知道影片最後幾分鐘還有在整理但就沒有繼續照做了。

 getTodos() {
    return this.http.get('./me/todomvc', this.requestOptions).map(res =>{
        return res.json();
    }).catch(error =>{
        console.log(error);
        return Observable.of<any[]>([]);
    })
  }

  saveTodos(newTodos: any[]) {
    this.http.post('./me/todomvc', newTodos, this.requestOptions).map(res =>{
        this.todos =res.json();
        }).catch(error =>{
            console.log(error);
        return Observable.of<any[]>([]);
    })
  }

最主要在版本差異上遇到的問題，是我自己寫出的程式pipe、subscribe裡面那段跟舊版的map那一段我不是很了解在做什麼，只是邊查資料邊try寫出來可以用
以及每次觸發 資料上傳的post方法都會有個錯誤訊息回報

ERROR 
HttpErrorResponse {headers: HttpHeaders, status: 422, statusText: 'Unprocessable Entity', url: 'http://localhost:4200/me/todomvc', ok: false, …}
error: {message: 'Unprocessable Entity', status: 422}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:4200/me/todomvc: 422 Unprocessable Entity"
name: "HttpErrorResponse"
ok: false
status: 422
statusText: "Unprocessable Entity"
url: "http://localhost:4200/me/todomvc"
[[Prototype]]: HttpResponseBase

原本想得過且過可以用就放了自己，但想想這好像不該是學習的心態，在此發文請教各位前輩
感謝！