Question

我有两个不同的表Customer和Ticket。这是我的第一个问题：Post Method using DTO 我在后端中创建了CustomerDto和TicketDto类。我应该改变我的角度吗？

我想将Customer和Ticket一起保存，如图所示。

如何在前端进行此操作？

这是我后端的方法：

@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中为客户提供的请求正文：

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中的机票请求正文：

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

我的模型客户：ts

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

我的票证.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

您可以使用可观察的fork-join运算符，希望对您有所帮助...

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

Demo from medium.com

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

2 个答案: