时间戳

首页 > 解决方案 > 从 Angular 中的表中删除数据行（Spring-Rest API，MongoDB）

angular - 从 Angular 中的表中删除数据行（Spring-Rest API，MongoDB）

问题描述

我正在为库中的成员开发一个 crud 应用程序，我想执行删除操作，但它不起作用。请帮我解决这个问题。

休息 API

@DeleteMapping("/members")
public Member delete(@RequestBody Member member){
    repository.delete(member);
    return member;
}

至于 REST Api 它运行良好，我使用 Postman 进行了检查。

Http服务.ts

export class Member{
constructor(
public id:string,
public name:string,
public fBook:Book,
public contact:string,
){
}
}

export class Book{
constructor(
public author:string,
public name:string,
public year:string
){
}
}

export class HttpClientService {

constructor(
private httpClient: HttpClient
) { }

private url= 'http://localhost:8080/members';

deltMem(member: Member){
return this.httpClient.delete<Member>(this.url);
}
}

deltacomp.ts

export class DeleteComponent implements OnInit {

members: Member[];

constructor(
 private httpClientService: HttpClientService
 )  { }


deleteMember(members:Member){
this.httpClientService.deltMem(members).subscribe(
  res => {
    console.log(res);
  }
)
}}

标签： angularspring-boot

解决方案

body为 RESTDelete方法发送内容并不是一种常见的良好做法。即使它不是被禁止的。我不建议你使用它。 您可以阅读这篇文章了解更多详情。

事实上，Angular不支持它作为常见和简单的方式。您可以，但您需要额外的代码，请参阅这篇文章了解更多详细信息。

如果您正在设计后端架构（我的意思是您可以自由调整和设计它），在这种情况下，我强烈建议您使用 anid来标识您要删除的资源：

DELETE http://your-api-service/members/15

它更清晰、简单、易于阅读。

所以你的Spring Boot代码应该是：

@DeleteMapping("/members/{memberId}")
public Member delete(@PathVariable("memberId") Integer memberId){
    Member memberToDelete = repository.findById(memberId);
    // ... delete member
    return memberToDelete;
}

和你的Angular code：

deleteMember(member: Member){
  return this.httpClient.delete<Member>(`${this.url}/${member.id}`);
}

推荐阅读