edit and delete operation in angular

问题

I'm building a crud operation and was able to do the create operation. Now I'm trying to edit and delete them. I tried getting individual data through service but failed. It would be nice if anyone could help me with this.

service.ts

 // Fetch Role Data
getRoleData(){
var headers = new HttpHeaders().set('Authorization', 'Token ' + 
localStorage.getItem('usertoken'));
var options_role =  {
    headers: headers
};
return this.httpClient.get('api/auth/role/', options_role);     
}

// Add Data
sendRole(data){
console.log(data);
let headers = new Headers({ 'Content-Type': 'application/json' 
}).set('Authorization', 'Token ' + localStorage.getItem('usertoken'));
var options =  {
headers: headers
};
return this.httpClient.post('api/auth/role/', data, this.options)
.map((res:Response)=> res.json())
.catch(this.handleErrorObservable); 
}

I tried to get individual data but i was not able to, This is what i tried. Like I'm not able to get the console value.

GetRoleFromId(id:number){
var headers = new HttpHeaders().set('Authorization', 'Token ' + localStorage.getItem('usertoken'));
var options =  {
headers: headers
};

const url= 'api/auth/role/'+ id;
return this.httpClient.get(url)
.map((res:Response)=>console.log(res))
.catch(this.handleErrorObservable); 
}

component.ts

//fetching data by subscribing 

getRolesFromServices():void{
this.Authentication.getRoleData().subscribe(
  (data) =>{      
    console.log(data);       
  },err =>{
    console.log(err);
  }
)
}

addRole(role){
  console.log(role.value);
  this.Authentication.sendRole({'name':role})
  .subscribe(role=> this.persons =role)

}

//I'm able to console individual data by clicking on a button which 
has this function

onSelect(person){
  this.roles=person;
  console.log(this.roles);
}

component.html

<a type="button" class="edit" (click)="onSelect(person)" data- 
toggle="modal" data-target="#editModal">Edit</a>

<!-- Edit Modal -->
     <div class="modal" id="editModal">
      <div class="modal-dialog">
        <div class="modal-content">

     <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

     <!-- Modal body -->
     <div class="modal-body">
      <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)="addRole(role.value)">Submit</button>
      </form>
     </div>

      <!-- Modal footer -->
      <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

     </div>
    </div>
   </div>

回答1:

Change your service.ts

// Add Data
sendRole(data){
   console.log(data);
   let headers = new Headers({ 'Content-Type': 'application/json' 
      }).set('Authorization', 'Token ' + localStorage.getItem('usertoken'));
   var options =  {
      headers: headers
   };
   return this.httpClient.post('api/auth/role/', data, this.options); 
}

// Get Data
GetRoleFromId(id:number){
   var headers = new HttpHeaders().set('Authorization', 'Token ' + localStorage.getItem('usertoken'));
   var options =  {
      headers: headers
   };

   const url= 'api/auth/role/'+ id;
   return this.httpClient.get(url)
}

Just try it without map catch.

来源：https://stackoverflow.com/questions/52702664/edit-and-delete-operation-in-angular