如何在 Angular 中组合两个请求主体

Question

我有两个不同的表 Customer 和 Ticket。 这是我的第一个问题：Post Method using DTO 我在后端创建了 CustomerDto 和 TicketDto 类。我应该在 Angular 中进行哪些更改？

我想用Ticket 列表保存我的Customer，如图所示。

如何在我的前端做到这一点？

这是我在后端的方法：

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

我在 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 代码：

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

我在 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代码：

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

我的客户服务：

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

我的票务服务：

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

我的模型 customer.ts：

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

我的模特ticket.ts：

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

Answer 1

您在 Angular for Customer 中的请求正文应如下所示：

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

所以你必须相应地重构你的代码！例如，你可以这样实现：

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

你的模型应该是这样的：

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

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

你可以摆脱CreateTicketComponent和TicketService！

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

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

Answer 2

您可以使用 observable fork-join 运算符我希望这会有所帮助...

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

Demo from medium.com