iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
0
自我挑戰組

Angular 學習雜記系列 第 27

Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十五)

在上一個章節中,了解到什麼是http的CURD。在這個章節,就先來說明如何更新資料。首先,在employeeservice.service中,增加updateEmployeeinfo的函式來更新員工資料,主要是用輸入的參數,將Employeeinfo物件輸入到函式中,再透過http.put,來更新整個Employeeinfo,程式碼如下:

  // 更新員工資料
  updateEmployeeinfo(employeeinfo: Employeeinfo): Observable<any> {
    return this.http.put(this.employeeUrl, employeeinfo, httpOptions)
      .pipe(
        catchError(this.handleError<Employeeinfo>(`updateEmployeeinfo`))
    );
  }

在處理好Service後,接下來,在原來的員工資料明細,增加一個更新的按鈕及呼叫Service的函式。在employee-detail.component.ts中,增加呼叫Service的函式,將完整的employee物件,輸入函式中。程式碼如下:

  // 更新員工資料
  updateinfo(): void {
    this.employeeService.updateEmployeeinfo(this.employee)
      .subscribe();
  }

在employee-detail.component.html中,增加一個更新的按鈕,在(click)事件中,繫結到updateinfo()函式。程式碼如下:

  <button (click)="updateinfo()">更新</button>

下一個章節,就是如何新增了。請看下回分解。


上一篇
Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十四)
下一篇
Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十六)
系列文
Angular 學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言