3-3.Angular 入門教學 - 利用HttpClient新增資料至後端伺服器 | 凱哥寫程式's Blog

影片講解

首先我們就要來改寫之前的add()新增資料的函式，以下式原本的樣子

add() {
  const todo: Todo = {
    Status: false,
    Thing: this.todoInputModel,
    Editing: false
  }
  this.todoDataList.push(todo);
  this.todoInputModel = '';
}

在這裡面，我們要加上一個傳值給後端的程式片段

this.http.post('/api/todo2_16', todo).subscribe();

這邊用的是post方法，然後第一個欄位是網址，那網址會跟取得資料的網址一樣，這邊如果對http傳輸不熟悉的人，可能會不明白為什麼網址會一樣

但實際上，雖然網址一樣，但這邊傳輸的method會是post，那這樣在我們後端其實是不一樣的，所以同個網址卻可以做不同的事，這是一種稱為 ‎RESTful API 的寫法，有興趣可以去google，這邊就不在多提了

第二個欄位則是放你要傳過去後端新增的資料，那在這個範例是我們上面建立好的todo物件，所以就把這個物件放在第二欄位

subscribe()裡面先不做任何事，這樣就好，那整段程式就如下

const todo: Todo = {
  Status: false,
  Thing: this.todoInputModel,
  Editing: false
}
this.http.post('/api/todo2_16', todo).subscribe();
this.todoDataList.push(todo);
this.todoInputModel = '';

這樣就完成了新增，趕快就來試試是否可以成功

按下Enter後，我們重新整理看看，會發現資料還是在，那代表已經順利傳上伺服器了

那這邊可能會有人說，剛剛Enter完不就有看到"去遊樂園"在下方列表出現了嗎？

但其實別忘了，下方會出現的原因是我們程式中這段this.todoDataList.push(todo)，這段是在你這邊電腦記憶體操作後出現的，但伺服器上有沒有真的存進去是另一回事

而重新整理後，資料的來源是從伺服器取得的，如果有才能真正的確定說，資料真的有存進伺服器

在Angular新增資料就是這麼簡單，你學會了嗎？

但其實這樣子會有一個大問題，就是我們自行新增的this.todoDataList.push(todo)，並沒有正確的主鍵欄位TodoId的值

這樣會造成後續刪除跟更新無法正常運作，因為刪除跟更新必須要指定對象，而指定的依據就是TodoId

所以程式應該會有以下兩種寫法才可行

第一種


//寫一個讀取全部代辦事項的函式
getData() {
  this.http.get<Todo[]>('/api/todo2_16').subscribe(data => {
    this.todoDataList = data;
  });
}

add() {
  const todo: Todo = {
    Status: false,
    Thing: this.todoInputModel,
    Editing: false,
    TodoId: ''
  }
  this.http.post('/api/todo2_16', todo).subscribe(() => {
  	//重新讀取全部代辦事項
	this.getData();
  });
  //這行拿掉
  //this.todoDataList.push(todo);
  this.todoInputModel = '';
}

如此，重新讀取代辦事項後，每個代辦事項都會有TodoId了

第二種

add() {
  const todo: Todo = {
    Status: false,
    Thing: this.todoInputModel,
    Editing: false,
    TodoId: ''
  }
  this.http.post('/api/todo2_16', todo).subscribe(data => {
  	//push該api新增完後傳回來的data
	this.todoDataList.push(data);
  });
  //這行拿掉
  //this.todoDataList.push(todo);
  this.todoInputModel = '';
}

一個標準的restful api設計，在新增完物件後，會回傳一個新增後的物件資料，此時這個資料就會有主鍵，因此push至原有陣列就好

但這邊就要看你後端有沒有這樣設計，如果沒有就只能用第一種方式

第一種跟第二種主要的差別在於跟後端傳輸次數跟檔案大小

第一種要多詢問一次後端，而第二種則是新增完後順便回傳資料，這樣可以少了些許傳輸時間

第二種也少傳很多資料，如果資料量大，第一種就很佔流量

想看操作順序跟更多的解說，可以看影片

題外話

我這邊有鎖定資料最高只能存15筆，避免有人無限新增撐爆我資料庫= =

所以發現超過15筆無法再繼續新增的人，請裡用後面教的刪除，刪掉一些資料即可

另外，我每天的資料庫也會重置，維持一個乾淨的狀態XD