angular 中的编辑和删除操作 [英] edit and delete operation in angular

查看：70
本文介绍了angular 中的编辑和删除操作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在构建一个 crud 操作并且能够执行创建操作.现在我正在尝试编辑和删除它们.我尝试通过服务获取个人数据但失败了.如果有人能帮我解决这个问题就好了.

<块引用>

service.ts

//获取角色数据获取角色数据(){var headers = new HttpHeaders().set('Authorization', 'Token' +localStorage.getItem('usertoken'));var options_role = {标题:标题};return this.httpClient.get('api/auth/role/', options_role);}//添加数据发送角色(数据){控制台日志(数据)；let headers = new Headers({ 'Content-Type': 'application/json'}).set('Authorization', 'Token' + localStorage.getItem('usertoken'));变量选项 = {标题:标题};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'));变量选项 = {标题:标题};const url = 'api/auth/role/'+ id;返回 this.httpClient.get(url).map((res:Response)=>console.log(res)).catch(this.handleErrorObservable);}

<块引用>

component.ts

//订阅获取数据getRolesFromServices():void{this.Authentication.getRoleData().subscribe((数据) =>{控制台日志(数据)；},错误=>{控制台日志(错误)；})}添加角色(角色){控制台日志(角色.值)；this.Authentication.sendRole({'name':role}).subscribe(role=> this.persons =role)}//我可以通过单击一个按钮来控制单个数据有这个功能onSelect(人){this.roles=人；console.log(this.roles);}

<块引用>

component.html

编辑<!-- 编辑模态 --><div class="modal" id="editModal"><div class="modal-dialog"><div class="modal-content"><!-- 模态标题--><div class="modal-header"><h4 class="modal-title">模态标题</h4><button type="button" class="close" data-dismiss="modal">&times;</button>

<!-- 模态体--><div class="modal-body"><表格><div class="form-group" *ngIf="roles"><label for="text">角色:</label><input type="text" class="form-control"[(ngModel)]="roles.name" id="text" name="role" #role>

<button type="submit" class="btn btn-primary" (click)="addRole(role.value)">提交</button></表单>

<!-- 模态页脚--><div class="modal-footer"><button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>

解决方案

更改您的 service.ts

//添加数据发送角色(数据){控制台日志(数据)；let headers = new Headers({ 'Content-Type': 'application/json'}).set('Authorization', 'Token' + localStorage.getItem('usertoken'));变量选项 = {标题:标题};return this.httpClient.post('api/auth/role/', data, this.options);}//获取数据GetRoleFromId(id:number){var headers = new HttpHeaders().set('Authorization', 'Token' + localStorage.getItem('usertoken'));变量选项 = {标题:标题};const url = 'api/auth/role/'+ id;返回 this.httpClient.get(url)}

无需地图捕捉即可尝试.

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>

解决方案

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.

这篇关于angular 中的编辑和删除操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆