How to combine two request bodies in Angular

问题

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

回答1:

you can use observable fork-join operator i hope this will help...

https://www.learnrxjs.io/operators/combination/forkjoin.html

Demo from medium.com

回答2:

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

来源：https://stackoverflow.com/questions/53575487/how-to-combine-two-request-bodies-in-angular