Как показать ответ Spring Boot Data JPA Query в Angular 6 - PullRequest
Новая
       14

Как показать ответ Spring Boot Data JPA Query в Angular 6

0 голосов
/ 09 января 2019

Это продолжение для моего предыдущего вопроса Spring Boot Data JPA - как получить данные для определенного идентификатора В моем приложении Spring Boot у меня есть такой запрос: 

public interface FlightTicketRepository extends JpaRepository<Ticket, Integer> {

@Query("SELECT new dto.FlightTicketDto(t.ticket_id, f.departureDate, f.destinationDate, t.name, t.surname) "
        + "FROM Flight f INNER JOIN f.tickets t where t.ticket_id = :ticket_id")
List<FlightTicketDto> findByTicketId(Integer ticket_id);}

И такой контроллер 

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api")
public class FlightTicketController {

@Autowired
FlightTicketRepository flightTicketRepository;

@GetMapping("/mytickets/{ticket_id}")
public List fetchEmpDeptDataInnerJoin(@PathVariable Integer ticket_id) {
    return flightTicketRepository.findByTicketId(ticket_id);
}}

С моим @Query все в порядке, у меня такой результат:

enter image description here

Я хотел бы показать этот результат в своем веб-приложении, использующем Angular 6

FlightTicket.ts 

export class FlightTicket {
 ticket_id: number;
 departureDate: Date;
 destinationDate: Date;
 name: string;
 surname: string;
}

FlightTicketService.ts 

 export class FlightTicketService {

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

 constructor(private http: HttpClient) {
 }

 fetchEmpDeptDataInnerJoin(ticket_id: number): Observable<FlightTicket> {
 return this.http.get<FlightTicket>(`${this.baseUrl}/${ticket_id}`);
 }

mytickets-list.component.html - здесь я хочу показать свой ответ на запрос 

<div *ngIf="flightTicket">
<label>Destination date: </label> {{ flightTicket.destinationDate }}<br/>
<label>Departure date: </label> {{ flightTicket.departureDate }}<br/>
<label>Name: </label> {{ flightTicket.name }}<br/>
<label>Surname: </label> {{ flightTicket.surname }}<br/>
<label>id: </label> {{ flightTicket.ticket_id }}<br/>

myticketslist-component.ts 

export class MyticketsListComponent implements OnInit {

 flightTicket: FlightTicket = new FlightTicket( );
 flightTickets: Observable<FlightTicket[]>;
 ticket_id: number;

 constructor(private flightTicketService: FlightTicketService) { }

 ngOnInit() {
 this.ticket_id = 443;
 this.reloadData();
 }

reloadData() {
this.flightTicketService.fetchEmpDeptDataInnerJoin(this.ticket_id).
subscribe((response) => {
  this.flightTicket = response;
});}}

Вот результат. Пустой. Что не так?

enter image description here

1 Ответ

0 голосов
/ 09 января 2019

Хорошо, я отладил с использованием Augury и обнаружил, что мой ответ json похож на массив, а не на объект (как и должно быть)

Итак, я изменил в своем бэкэнде: 

@GetMapping("/mytickets/{ticket_id}")
public ResponseEntity<FlightTicketDto> fetchEmpDeptDataInnerJoin(@PathVariable("ticket_id") Integer ticket_id) {
    FlightTicketDto flight = flightTicketRepository.findByTicketId(ticket_id);
    return new ResponseEntity<>(flight, HttpStatus.OK);
}

и здесь: 

@Query("SELECT new dto.FlightTicketDto(t.ticket_id, f.departureDate, f.destinationDate, t.name, t.surname) "
        + "FROM Flight f INNER JOIN f.tickets t where t.ticket_id = :ticket_id")
FlightTicketDto findByTicketId(Integer ticket_id);
...