如何在Angular中合并两个请求主体 [英] How to combine two request bodies in Angular

问题描述

我有两个不同的表 Customer 和 Ticket 。
这是我的第一个问题：

如何在前端进行此操作？

这是我在后端中使用的方法：

  @Override 
 public Customer save（CustomerDto customerDto） {
客户客户=新客户（）； 
 customer.setName（customerDto.getName（））; 
 
 List< Ticket> tickets = new ArrayList<>（）; （TicketDto ticketDto：customerDto.getTicket（））的
 {
票证=新票证（）; 
 ticket.setDepartureCity（ticketDto.getDepartureCity（））; 
 ticket.setDestinationCity（ticketDto.getDestinationCity（））; 
 
 tickets.add（ticket）; 
} 
 customer.setTicket（tickets）; 
 return repository.save（customer）; 
} 
  

我在Angular中对客户的请求正文：

 出口类EnterNameComponent实现OnInit {
 
客户：Customer = new Customer（）; 
提交=否； 
 
构造函数（私有customerService：CustomerService）{} 
 
 ngOnInit（）{
} 
 
 newCustomer（）：void {
 this.submitted = false; 
 this.customer = new Customer（）; 
} 
 
 save（）{
 this.customerService.createCustomer（this.customer）
 .subscribe（data => console.log（data），错误=> console.log（错误））; 
 this.customer = new Customer（）; 
} 
 
 onSubmit（）{
 this.submitted = true; 
 this.save（）; 
} 
} 
  

用于添加新客户的HTML代码：

 < div class = form-group> 
< label for = name> Name< / label> 
< input type = text class = form-control id = name必填[（ngModel）] = customer.name name = name> 
< / div> 
  

我在Angular中的机票请求正文：

 导出类CreateTicketComponent实现OnInit {
 
票证：Ticket = new Ticket（）; 
提交=否； 
 
构造函数（私有ticketService：TicketService）{} 
 
 ngOnInit（）{
} 
 
 newTicket（）：void {
 this.submitted = false; 
 this.ticket = new Ticket（）; 
} 
 
 save（）{
 this.ticketService.createTicket（this.ticket）
 .subscribe（data => console.log（data），错误=> console.log（错误））; 
 this.ticket = new Ticket（）; 
} 
 
 onSubmit（）{
 this.submitted = true; 
 this.save（）; 
} 
} 
  

用于添加新票证的HTML代码：

 < div class = form-group> 
< label for = departureCity>出发城市< / label> 
< input type = text class = form-control id = departureCity必填[（ngModel）] = ticket.departureCity name = departureCity> 
< / div> 
 
< div class = form-group> 
< label for = destinationCity> Destination City< / label> 
< input type = text class = form-control id = destinationCity必填[（ngModel）] = ticket.destinationCity name = destinationCity> 
< / div> 
  

我的客户服务：

 导出类CustomerService {
 
 private baseUrl ='http：// localhost：8080 / api / customers'; 
 
构造函数（私有http：HttpClient）{
} 
 
 createCustomer（客户：对象）：Observable< Object> {
返回this.http.post（`$ {this.baseUrl}`+`/ create`，客户）; 
} 
} 
  

我的票务服务：

 导出类TicketService {
 
 private baseUrl ='http：// localhost：8080 / api / tickets'; 
 
构造函数（私有http：HttpClient）{
} 
 
 getTicket（id：number）：Observable< Object> {
返回this.http.get（`$ {this.baseUrl} / $ {id}`）; 
} 
 
 createTicket（ticket：Object）：Observable< Object> {
 return this.http.post（`$ {this.baseUrl}`+`/ create`，票证）; 
} 
  

我的模型客户。

 出口类别客户{
 id：数字； 
名称：字符串； 
} 
  

我的模型票。

 出口舱机票{
 id：number; 
离开城市：字串； 
 destinationCity：字符串； 
} 
  

解决方案

您在Angular中的请求正文客户应如下所示：

  {
 name：客户名称，
机票：[[
 {
 departureCity：部门城市，
 destinationCity：目标城市 
} 
] 
} 
  

因此，您必须相应地重构代码！例如，您可以这样实现：

 出口类CustomerComponent实现OnInit {
 
客户：客户=新的Customer（）； 
票：票=新票（）； 
提交=否； 
 
构造函数（私有customerService：CustomerService）{} 
 
 ngOnInit（）{
} 
 
 newCustomer（）：void {
 this.submitted = false; 
 this.customer = new Customer（）; 
 this.ticket = new Ticket（）; 
} 
 
 save（）{
 this.customer.tickets [0] = this.ticket; //您需要在客户
中设置订单项this.customerService.createCustomer（this.customer）
 .subscribe（data => console.log（data），error => console.log（error ））; 
} 
 
 onSubmit（）{
 this.submitted = true; 
 this.save（）; 
} 
} 
  

您的模型应如下所示：

 出口舱机票{
离开城市：字符串； 
 destinationCity：字符串； 
} 
 
出口类别客户{
名称：字符串； 
票：Ticket []； 
} 
  

您可以摆脱 CreateTicketComponent 和 TicketService ！

更新：
要调试要发送到服务器的json，您将您的 CustomerService 方法更新为：

  createCustomer（customer：Object） ：可观察的< Object> {
 const body = JSON.stringify（customer）; //添加此
 console.log（body）; //添加此
返回this.http.post（`$ {this.baseUrl}`+`/ create`，body）; 
} 
  

I have two different Tables Customer and Ticket. Here is my first question: Post Method using DTO I've created CustomerDto and TicketDto classes in my backend. What should I change in my Angular?

I want to save my Customer with list of Ticket, like on the picture.

How can I do this in my frontend?

Here is my method in the backend:

@Override
public Customer save(CustomerDto customerDto) {
    Customer customer = new Customer();
    customer.setName(customerDto.getName());

    List<Ticket> tickets = new ArrayList<>();
    for (TicketDto ticketDto : customerDto.getTicket()) {
        Ticket ticket = new Ticket();
        ticket.setDepartureCity(ticketDto.getDepartureCity());
        ticket.setDestinationCity(ticketDto.getDestinationCity());

        tickets.add(ticket);
    }
    customer.setTicket(tickets);
    return repository.save(customer);
    }

My request body in Angular for Customer:

export class EnterNameComponent implements OnInit {

customer: Customer = new Customer();
submitted = false;

constructor(private customerService: CustomerService) { }

ngOnInit() {
}

newCustomer(): void {
this.submitted = false;
this.customer = new Customer();
}

save() {
this.customerService.createCustomer(this.customer)
  .subscribe(data => console.log(data), error => console.log(error));
this.customer = new Customer();
}

onSubmit() {
this.submitted = true;
this.save();
}
}

HTML code for adding new Customer:

  <div class="form-group">
  <label for="name">Name</label>
  <input type="text" class="form-control" id="name" required   [(ngModel)]="customer.name" name="name">
  </div>

My request body in Angular for Ticket:

 export class CreateTicketComponent implements OnInit {

 ticket: Ticket = new Ticket();
 submitted = false;

 constructor(private ticketService: TicketService) { }

 ngOnInit() {
 }

 newTicket(): void {
 this.submitted = false;
 this.ticket = new Ticket();
 }

 save() {
 this.ticketService.createTicket(this.ticket)
  .subscribe(data => console.log(data), error => console.log(error));
 this.ticket = new Ticket();
 }

onSubmit() {
this.submitted = true;
this.save();
}
}

HTML code for adding new Ticket:

<div class="form-group">
  <label for="departureCity">Departure City</label>
  <input type="text" class="form-control" id="departureCity" required [(ngModel)]="ticket.departureCity" name="departureCity">
</div>

<div class="form-group">
  <label for="destinationCity">Destination City</label>
  <input type="text" class="form-control" id="destinationCity" required [(ngModel)]="ticket.destinationCity" name="destinationCity">
</div>

My CustomerService:

export class CustomerService {

 private baseUrl = 'http://localhost:8080/api/customers';

constructor(private http: HttpClient) {
}

createCustomer(customer: Object): Observable<Object> {
return this.http.post(`${this.baseUrl}` + `/create`, customer);
}
}

My TicketService:

export class TicketService {

private baseUrl = 'http://localhost:8080/api/tickets';

constructor(private http: HttpClient) {
}

getTicket(id: number): Observable<Object> {
return this.http.get(`${this.baseUrl}/${id}`);
}

createTicket(ticket: Object): Observable<Object> {
return this.http.post(`${this.baseUrl}` + `/create`, ticket);
}

My model customer.ts:

export class Customer {
id: number;
name: string;
}

My model ticket.ts:

 export class Ticket {
 id: number;
 departureCity: string;
 destinationCity: string;
 }

解决方案

Your request body in Angular for Customer should look like this:

{
  "name" :"Cust name",
  "tickets": [
    {
      "departureCity" :"Dept City",
      "destinationCity" : "Dest City"
    }
  ]
}

So you have to refactor your code accordingly! For example, you can achieve like this:

export class CustomerComponent implements OnInit {

customer: Customer = new Customer();
ticket: Ticket = new Ticket();
submitted = false;

constructor(private customerService: CustomerService) { }

ngOnInit() {
}

newCustomer(): void {
 this.submitted = false;
 this.customer = new Customer();
 this.ticket = new Ticket();
}

save() {
 this.customer.tickets[0] = this.ticket;  // you need to set ticekts within customer
 this.customerService.createCustomer(this.customer)
  .subscribe(data => console.log(data), error => console.log(error));
}

onSubmit() {
 this.submitted = true;
 this.save();
}
}

And you model should look something like this:

export class Ticket {
 departureCity: string;
 destinationCity: string;
}

export class Customer {
 name: string;
 tickets: Ticket[];
}

You can get rid of CreateTicketComponent and TicketService!

Update: To debug what json you are sending to server, you update your CustomerService method as:

createCustomer(customer: Object): Observable<Object> {
    const body = JSON.stringify(customer);  // add this
    console.log(body);                      // add this
    return this.http.post(`${this.baseUrl}` + `/create`, body);
}

这篇关于如何在Angular中合并两个请求主体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！