3-5.Angular 入門教學 - 利用HttpClient刪除資料至後端伺服器

影片講解

那刪除的寫法也很簡單

delete(todo: Todo) {
  this.todoDataList = this.todoDataList.filter(data => data !== todo);
}

這是當初沒有後端時刪除的程式碼

我們只要再加上一段刪除的語法即可

this.http.delete('/api/todo2_16/' + item.TodoId).subscribe();

那這是改用delete方法，網址寫法跟更新一樣，但刪除不需要知道你這筆的內容

只需要知道是哪個主鍵就好，那主鍵就是TodoId，我們已經透過網址傳過去後端了

那後端只要依據這個TodoId就可以知道要刪除哪一筆了

好~那我們就來刪除"去看書"這筆看看

刪除之後，一樣畫面上看到消失不代表有成功刪除後端的資料

所以我們再重新讀取一次資料，發現"去看書"這筆不在，代表確實有從後端刪除成功

那別忘了，我們還有一個刪除的功能在右下角"Clear completed"，這是一個刪除已完成的代辦事項

那要實作刪除多筆的功能，大略有三種方式

第一種

土法煉鋼

clearCompleted() {
  this.todoDataList.forEach(data => {
    if (data.Status) {
      this.http.delete('/api/todo2_16/' + data.TodoId).subscribe();
    }
  });
  this.todoDataList = this.todoActive;
}

我直接跑foreach，遇到Status完成的，就執行一次刪除指令

那這樣的缺點就是，你會有很多request，資料量一大，會有很不好的影響

第二種

這支後端API有支援多筆刪除的功能

那以我這支api，你可以傳多個Id然後用逗號分開，我就會把這些Id的都刪除

那這個寫法，不一定都是這樣寫，自己要跟後端工程師講好

clearCompleted() {
  let idList = '';
  this.todoDataList.forEach(data => {
    if (data.Status) {
      idList = idList + ',' + data.TodoId;
    }
  });
  this.http.delete('/api/todo2_16/' + idList).subscribe();
  this.todoDataList = this.todoActive;
}

第三種

後端有做一隻專門刪除特定行為的API，就是執行這個API代辦事項都會被刪掉

那這個也是要跟後端工程師講好，有這個功能才有

clearCompleted() {
  this.http.delete('/api/todo2_16/clearCompleted').subscribe();
  this.todoDataList = this.todoActive;
}

第二、三種可能就跟restful風格比較沒關係了，屬於你自己跟後端談好的一種寫法

restful風格似乎沒有規範多筆刪除的一個共通的寫法格式是怎樣

所以就自己跟後端談好就好，那我這邊只是個範例

實際操作的話，可以看影片

範例檔：下載