getting empty {} instead of id

Question

I'm trying to do update operation in Angular. When I submit after updating it shows random number at the end of the API instead of the particular id number. The request URL is like this

Request URL: http://localhost:4200/api/auth/role/%7B%7D/

Instead it should be http://localhost:4200/api/auth/role/1/

service.ts

edit_role(param:any):Observable<any>{
    let body = JSON.stringify(param);
    console.log(body);
    var headers = new HttpHeaders().set('Authorization', 'Token ' + localStorage.getItem('usertoken'));
    var options =  {
        headers: headers
    };
    return this.httpClient.put('api/auth/role/' + body, options)
    .map(success => success)
    .catch(this.handleErrorObservable);
}

the console is showing an empty {}

component.ts

editRole(id){
    let editrole: any = {};
    editrole['name'] = this.Editrole.name;
    console.log(editrole);
    let roleid:number;
    roleid = this.Editrole.id;
    this.Authentication.edit_role(editrole).subscribe(res => {
        console.log('edited succesfully'); 
    });
}

The console shows {name:undefined}

Html

<form> <div class="form-group" *ngIf="roles">
    <label for="text">Role:</label> 
    <input type="text" class="form-control"[(ngModel)]="roles.name" id="text" name="role" #role>
</div> 
<button type="submit" class="btn btn-primary" (click)="editRole(role)">Submit</button> </form>

Answer 1

in component you should change it like this

//class variable
editrole: any;

//in constructor
this.editrole={};

//in function
this.editrole={
     name: this.roles.name,
     id: this.roles.id
}

this.Authentication.edit_role(this.editrole).subscribe(res => {
    console.log('edited succesfully'); 
});

in service file

 let body = param;
return this.httpClient.put('api/auth/role/' + body.id, body ,options)