3-4.Angular 入門教學 - 利用HttpClient更新資料至後端伺服器

 影片講解

更新其實跟新增大同小異，不過我們這邊的程式要做出一些修改

<input *ngIf="item.Editing"
#itemInput
[(ngModel)]="item.Thing"
(keyup.enter)="update(item)"
(blur)="update(item)"
(mouseenter)="itemInput.focus()"
class="edit" />

 enter和blur事件都改回一樣用update並傳item進去

然後我們要先在Todo介面加上一個屬性TodoId

export interface Todo {
    TodoId: string,
    Status: boolean;
    Thing: string;
    Editing: boolean;
}

這是資料庫的欄位主鍵，是每筆資料的唯一Key，要有這個屬性，後端才會知道你要更新的是哪一筆

接著就要使用更新指令

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

 這邊我們換成了put，網址一樣是"/api/todo2_16"只不過後面多了一個item.TodoId

這邊並不是一定要這樣寫，而是看你後端怎麼設計，通常如果你們是前後端不同人開發

你們會先事前討論好，前端該傳甚麼內容給後端，而後端會吐什麼內容回去

而我這邊的後端要求你要傳你更新那筆的Id在網址後面，我會根據這個Id進行更新

而第二個欄位則是放更新內容，那我們就直接把item給丟進去即可

那因為我們之前是用ngModel做繫結的，所以在你打的當下item的值已經被改變，所以直接丟進去即可

最後整個程式如下

update(item: Todo) {
  this.http.put('/api/todo2_16/' + item.TodoId, item).subscribe();
  item.Editing = false;
}

好，那我們就可以馬上修改看看變成"去遊樂園1"，修改完後，重新整理，看是否值確實還是改之後的值

 一樣還是"去遊樂園1"，代表這次的更新已順利更新

想看更多話跟詳細操作，可以看影片

參考資料： 
發起 PUT 請求