редактировать и удалять операции в угловых - PullRequest
Новая
       41

редактировать и удалять операции в угловых

0 голосов
/ 08 октября 2018

Я строю грубую операцию и смог выполнить операцию создания.Сейчас я пытаюсь редактировать и удалять их.Я пытался получить отдельные данные через сервис, но не смог.Было бы хорошо, если бы кто-нибудь мог помочь мне с этим.

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

Я пытался получить отдельные данные, но яне смог, это то, что я пытался.Как будто я не могу получить консольное значение. 

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 Ответ

0 голосов
/ 08 октября 2018

Измените ваш 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)
}

Просто попробуйте это без улова карты.

...