在角度编辑和删除操作 [英] 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">×</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>
推荐答案
更改服务。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)
}
只需尝试一下
这篇关于在角度编辑和删除操作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文