trying to record update after get the record from the list

Question

I am trying to update the record

 

but when I click on edit button then get an error 

 

  

see below code:

 

registration.component.html

<div>
      <button type="button" (click)="registration()">Submit</button>

      <button type="button" (click)="edit()">Edit</button>
</div>

<h2>List Of Employee</h2>

<ag-grid-angular style="width: 1150px; height: 200px;"
                 class="ag-theme-balham"
                 [rowData]="elist"
                 [columnDefs]="columnDefs"
                 (rowClicked)='onGridRowClicked($event)'>
</ag-grid-angular>

registration.component.ts

columnDefs = [
  { headerName: 'empid', field: 'empid' },
  { headerName: 'username', field: 'username' },
  { headerName: 'empaddress', field: 'empaddress' },
  { headerName: 'password', field: 'password' },
  { headerName: 'country', field: 'country' },
  {
    headerName: 'Edit',

    template: '<span><i class="fa fa-edit" data-action-type="edit"></i></span>',
  }
];

onGridRowClicked(e: any) {
  if (e.event.target !== undefined) {
    let actionType = e.event.target.getAttribute("data-action-type");
    if (actionType == "edit") {

      this.rowData = this.myservice.getExistRecord(e.data.empid).subscribe((data: any) => {
        console.log("inside get data from list 1")
        if (data.message == "GetSuccess") {

          //get data from the list
          debugger
          this.txtusername = e.data.username;
          this.txtempaddress = e.data.empaddress;
          this.txtpassword = e.data.password;
          this.txtcountry = e.data.country;
          this.empid = e.data.empid;
          this.dataUpdate();
          console.log("empid", e.data.empid);
          console.log("Edit Icon Clicked");
        }
      });
    }
    else if (actionType == "delete") {
      console.log("View delete action clicked");
    }
  }
}

//after get the data then update a record
dataUpdate() {
  this.myservice.editExistRecord(this.empid, this.txtusername, this.txtempaddress, this.txtpassword, this.txtcountry).subscribe((data: any) => {
    console.log("Inside editExistRecord")
    if (data.message == "UpdateSuccessfully") {
      debugger
      this.list();
    }
    else if (data.message == "UpdateSuccessfully") {
      debugger
      this.list();
    }
  });
}

edit() {
  this.dataUpdate();
}

backendservice.service.ts

//getdata from the list for update record
 public getExistRecord(empid) {
   this.url = "https://localhost:44371/emps/GetRecordForEdit?empid=" + empid;
  // this.url = "https://localhost:44371/emps/Edit?empid=" + 2013;
   console.log(this.url);
   return this.httpClient.get<any>(this.url);
 }

 //update record
 public editExistRecord(empid,username, empaddress, password, country): Observable<any> {
   debugger
   //https://localhost:44371/emps/Edit?empid=2013
   this.url = "https://localhost:44371/emps/Edit?empid=" + empid + "&username=" + username + "&empaddress=" +  empaddress + "&password=" + password + "&country=" + country;
   const postdata = {
     'username': username,
     'empaddress': empaddress,
     'password': password,
     'country': country,
   }
   console.log(this.url);
   return this.httpClient.put<any>(this.url, postdata);
 }

(NetWork tabl 404 not found):

 

 

 

is there any issue with my webservice?

 

why my record is not updated