空{}代替id

时间:2018-10-09 09:39:11

标签: angular angular5 angular6 angular-httpclient

我正在尝试在Angular中执行更新操作。当我更新后提交时,它会在API末尾显示随机数,而不是特定的ID号。 请求网址是这样的

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

应该是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);
}

控制台显示一个空的{}

  

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'); 
    });
}

控制台显示{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>

1 个答案:

答案 0 :(得分:1)

在组件中,您应该这样更改

//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'); 
});

在服务文件中

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